From 64e349ab387855dcd833791d82baa63d158f5d75 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Fri, 7 Jul 2017 10:51:43 -0700 Subject: [PATCH] First pass on updating the JS docs to better describe module bundling --- docs/pages/javascript.md | 4 +++- docs/pages/starter-projects.md | 6 ++---- 2 files changed, 5 insertions(+), 5 deletions(-) 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. -- 2.47.2