We use Common.js style Javascript modules, bundled together into different files using Webpack. There is generally one JS "entry" bundle per page, as well as a common bundle that contains frequently used modules and runs code needed for every page.
##JS file structure
All Javascript source files are found in opentreemap/*/js/src/. Entry modules are in the root of the src/ directory, while non-entry modules are in src/lib/
Javscript libraries are in one of 4 places:
- Libraries that are maintained by their authors on NPM are listed in the package.json and brought in by npm install
- Libraries that use a module system like Common.js, AMD, UMD, or similar, are located in
assets/js/vendor/ - Libraries which pollute the global namespace and/or depend on global variables are in
assets/js/shim/- When adding a JS library which needs shimming, don't forget to add it to the shim section of the Webpack configuration
- Libraries which require being downloaded from the vendor's servers (such as the Google Maps API) are included directly in a
<script>tag on the page and then manually shimmed with a wrapper file inassets/js/vendor/