From: Kevin Ball Date: Fri, 7 Jul 2017 17:51:43 +0000 (-0700) Subject: First pass on updating the JS docs to better describe module bundling X-Git-Tag: v6.4.2-rc2~1^2^2~6^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10365%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git First pass on updating the JS docs to better describe module bundling --- diff --git a/docs/pages/javascript.md b/docs/pages/javascript.md index 873bdce77..c3edc5a4b 100644 --- a/docs/pages/javascript.md +++ b/docs/pages/javascript.md @@ -34,7 +34,9 @@ When configuring Babel to work with Foundation, you only need to include the `es ### File Structure -All of Foundation's plugins ship as individual files, named `foundation.tabs.js`, `foundation.accordion.js`, and so on. These files are also combined into one big file called `foundation.js`, which allows you to get every plugin at once. +All of Foundation's plugins ship both as importable ES2016 modules, and as individual precompiled "drop in" files, named `foundation.tabs.js`, `foundation.accordion.js`, and so on. These files are also combined into one big file called `foundation.js`, which allows you to get every plugin at once. The precompiled files live in the `dist` folder, while the importable modules live in the `src` folder. + +If you're not familiar with module bundling, you'll probably want to reference the precompiled files from `dist`. If you're only using certain plugins, know that they all require `foundation.core.js` and `foundation.util.mediaQuery.js` to be loaded *first*. Some plugins also require specific utility libraries that ship with Foundation—refer to a plugin's documentation to find out which plugins require what, and see the [JavaScript Utilities](javascript-utilities.html) page for more information. diff --git a/docs/pages/starter-projects.md b/docs/pages/starter-projects.md index 051402d28..2b57d5516 100644 --- a/docs/pages/starter-projects.md +++ b/docs/pages/starter-projects.md @@ -70,11 +70,9 @@ The CSS is output in the `nested` style, which is readable like normal CSS. A so ### JavaScript Compilation -All JavaScript files in the `src/assets/js` folder, along with Foundation and its dependencies, are bundled into one file called `app.js`. The files are bundled in this order: +All JavaScript files in the `src/assets/js` folder, along with Foundation and its dependencies, are bundled into one file called `app.js`. The files are imported using module dependency with [webpack](https://webpack.js.org/) as the module bundler. -- Foundation's dependencies (including jQuery) -- All files in `src/assets/js` -- `app.js` +If you're unfamiliar with modules and module bundling, check out [this resource for node style require/exports](http://openmymind.net/2012/2/3/Node-Require-and-Exports/) and [this resource to understand ES6 modules](http://exploringjs.com/es6/ch_modules.html) A source map is created that maps back to the original files. By default, the bundled `app.js` is uncompressed. When building for production, the file is run through [UglifyJS](https://github.com/mishoo/UglifyJS) for compression.