-
Notifications
You must be signed in to change notification settings - Fork 1
Website JavaScript Overview
Almost all of the JavaScript in this project is implemented via Vue components. Vue.js is a very flexible and modular JavaScript framework that helps in writing reactive user interface elements and web applications.
webpack is a JavaScript module bundler. Because of the features used in writing the JavaScript for this project, it is not immediately ready for web browsers to understand, and necessitates that the JavaScript be processed into a final form that is compatible with most web browsers.
This is where webpack comes in. webpack is configured to take the contents of the _app/scripts/ and _app/vue/ directories and combine them into JavaScript files ready to be used with the website.
See webpack.config.js under the website's root directory for configuration details.
Each page that requires some JavaScript functionality (not every page does) has a script specifically compiled for it, instead of having a monolithic file containing JavaScript for the entire site. This is to prevent end users from having to download irrelevant and unused code. These scripts are named after the pages they are used in, such as:
resources.jstopic.jsnews.js
The utility.js script provides a centralized file for general helper functions that don't neatly fit into the code for any particular page, or that may be used in multiple pages.
If you need to add configurations to be made available to various scripts, you should use the config object made available by the environment-specific configuration scripts under _app/config.
Which environment's configuration script is used when building the website is controlled via the environment variable NODE_ENV when calling webpack. Please examine the npm scripts in package.json for different examples of usage involving setting values for NODE_ENV.
The SDG National Reporting Initiative website uses single file Vue.js components, which define Vue components with styling, markup, and scripting all in one self-contained file. These files should be located under _app/vue. The project does use these files to define component markup and scripting, but styling remains centralized under _app/sass.
The single file components must be compiled into actual JavaScript, which is handled by vue-loader for webpack.
Vuex is used to provide centralized shared storage between Vue components. Here, Vuex is primarily used for sharing resource filter selection state; you can find the Vuex storage module for this defined in _app/scripts/global-storage.js.