]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
First pass on updating the JS docs to better describe module bundling 10365/head
authorKevin Ball <kmball11@gmail.com>
Fri, 7 Jul 2017 17:51:43 +0000 (10:51 -0700)
committerKevin Ball <kmball11@gmail.com>
Fri, 7 Jul 2017 17:51:50 +0000 (10:51 -0700)
docs/pages/javascript.md
docs/pages/starter-projects.md

index 873bdce77d975f13fce5a7d4b22c08e8fcfbd9e3..c3edc5a4bb667dd4648bdb1a31e82be7dac6266a 100644 (file)
@@ -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&mdash;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.
 
index 051402d28d92496e0782a05a0e4fee67948bbe43..2b57d5516e7c89d5e8508c8857ec0400f2b94504 100644 (file)
@@ -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.