Skip to content

Commit

Permalink
docs: update ZURB template JavaScript docs foundation#10353
Browse files Browse the repository at this point in the history
Changes:
* Add infos about webpack
* Add infos about Babel
* Update recommended import process
* Change list of useful resources

Closes foundation#10353
  • Loading branch information
ncoden committed Feb 9, 2018
1 parent 24d2112 commit 8d92c80
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions docs/pages/starter-projects.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,16 @@ Here's an overview of what the ZURB Template can do:

* **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 imported using module dependency with [webpack](https://webpack.js.org/) as the module bundler.

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)
Javascript is transpiled using and [Babel](https://babeljs.io) (with the [es2015 plugin](https://babeljs.io/docs/plugins/#es2015)) so you can use [ES2015 features](https://babeljs.io/learn-es2015/).
The main Js file is under `src/assets/js/app.js`, and imports Foundation, jQuery and whatInput. You can import there installed packages and custom files, they will be included in the build.

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.

The whole bundling process is handled by [WebPack](https://webpack.js.org): it manages all assets and dependencies for you and compile them into one single file. If you're unfamiliar with imports or module bundling, check out:
* [What are ES6 imports](http://2ality.com/2014/09/es6-modules-final.html)
* [Beginner’s guide to Webpack](https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460)
* [Beginner’s guide to Javascript Modules](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc).

* **Image Compression**

By default, all images are copied as-is from `assets/img` to your `dist` folder. When building for production, images are run through [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin) for compression. The plugin supports JPEG, PNG, SVG, and GIF files.
Expand Down

0 comments on commit 8d92c80

Please sign in to comment.