From 8d92c8086a63e4e9eb4c26aa58520019bda3c406 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Fri, 9 Feb 2018 23:39:14 +0100 Subject: [PATCH] docs: update ZURB template JavaScript docs #10353 Changes: * Add infos about webpack * Add infos about Babel * Update recommended import process * Change list of useful resources Closes https://github.com/zurb/foundation-sites/issues/10353 --- docs/pages/starter-projects.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/pages/starter-projects.md b/docs/pages/starter-projects.md index 65bdf8575..90420970d 100644 --- a/docs/pages/starter-projects.md +++ b/docs/pages/starter-projects.md @@ -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. -- 2.47.2