Learn how to set up an ES6 environment with Webpack, Gulp and Babel and practice building your own. You can use this environment with Angular or any other framework.
Read through the comprehensive introduction and then hit the exercises.
Before we can start building our application, we have to make sure our environment is ready to handle ES6. Even though the ES6 spec has officially been approved, it is far from standard in most browsers today. ES6 brings a ton of new stuff, and it's going to take quite some time for all the different JavaScript environments to implement the new standard. But that doesn't mean we have to wait for them to write ES6 today!
With the help of transpilers like Babel and Traceur, we can write ES6 code that gets compiled down to the widely implemented ES5 that you are already comfortable with.
ES6 is awesome and we want to write our apps with it. Babel has a sweet REPL that you can play around with, but of course we can't write applications in a REPL. What are we to do?
The goal of this section is to not only learn how we can use these transpilers to write ES6 code today, but also how to use build tools to entirely automate this book keeping process.
Webpack is really convenient because it not only lets us transpile from ES6 to ES5 with Babel, but it also lets us organize our client-side code in modules.
Organizing our code in modules is a bit different than the traditional style. Gone are the days of endless <script> tags in our index.html that must be carefully ordered. Instead, we can break our app into small components and import them as needed. If you've ever used node, Webpack basically allows us to bring require to the client (or ES6's import, or even AMD's define)
Webpack allows us to:
- Transpile from ES6 to ES5 with Babel
- Load HTML files as modules
- Load CSS (along with your favorite preprocessor) append the styles to the DOM
- Bundle our app into a single script to transfer over the wire
- Load any and all modules (ES6, CommonJS, AMD)
Many of these things you might have done with another build tool like Gulp or Grunt. It's recommended that you leave any task that touch files (transpilation, minification, etc) to Webpack and use your other build system to orchastrate other automation.
Install Webpack with npm install -g webpack
Create a client folder to hold our app: mkdir client
Create client/app.js
var greeting = 'It works!';
alert(greeting);Create client/index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>Run the following:
webpack ./client/app.js ./client/bundle.js
Open index.html in your browser. It should alert It works!
Create client/content.js
// This is Node's module syntax
module.exports = 'It works from content.js';Update client/app.js
- var greeting = 'Hello world!';
+ var greeting = require('./content');
alert(greeting);Recompile with:
webpack ./client/app.js ./client/bundle.js
Update your browser window and you should see the alert It works from content.js
We want to add ES6 to our application. Webpack can only handle ES5 natively, so we need the babel-loader to process js files written with ES6 down to ES5. We can install any of the webpack loaders through npm.
Run npm init. Default options are fine.
Run npm install babel-loader --save-dev
ES6ify client/content.js
// This is ES6 module syntax now
export default 'It works from content.js'ES6ify client/app.js
import greeting from './content'
// We can use any ES6 syntax supported by Babel here now!
alert(`${greeting} and with ES6!!`)Now, we can use a special flag in our CLI to send all .js files through babel. Recompile your beautiful new ES6 app:
webpack ./client/app.js ./client/bundle.js --module-bind 'js=babel'
Update your browser window and you should see the alert It works from content.js
We now have a totally working, modular, ES6 app!!
Gulp is a generic JavaScript task runner that goes well beyond bundling. Gulp can handle many aspects of development. It can serve our files, watch our files and run commands if any of them change, create directories with boilerplate code, and even deploy our app.
Webpack can do a lot of tasks Gulp can. For our ES6 environment, we're going to a basic Gulpfile to serve our app and reload when a file changes.
Gulp runs on plugins. If you want to automate anything, run an npm search for gulp-whatever and chances are you'll find it.
We're going to focus on a couple of basics: serving and watching.
- Install gulp globally:
npm install -g gulp. - Install gulp locally also:
npm install gulp --save-dev - Create a
gulpfile.jsat the root of your project:
var gulp = require('gulp');
gulp.task('default', function() {
// This task will execute when you run `gulp`
});- Run gulp
$ gulp
The default task will run and do nothing! To run individual tasks, use gulp <task>
We're going to use Browsersync to serve our client (not actually a gulp specific plugin).
Install Browsersync: npm install browser-sync --save-dev
Update gulpfile.js
var gulp = require('gulp');
var serve = require('browser-sync');
gulp.task('serve', function() {
// This will serve our client folder on localhost:3000
serve({
port: 3000,
open: false,
server: {
baseDir: 'client'
}
});
});We've defined a new task so when we run gulp serve, our client folder will be served on localhost:3000
This is only semi useful, because right now if we make any changes to our app we have to run our webpack command: webpack ./client/app.js ./client/bundle.js --module-bind 'js=babel' to update our bundle.js and then run gulp serve again. This section was meant to just introduce you to creating new gulp tasks. You'll unlock Gulp's full potential in the exercises.
Gulp also has the power to watch your files for any changes, and run a command whenever it notices one of these changes. It doesn't even need a plugin. Let's do it!
Update gulpfile.js
var gulp = require('gulp');
var serve = require('browser-sync');
// ... previously defined tasks
gulp.task('watch', function() {
gulp.watch('client/**/*.{js,css,html}', [serve.reload])
});This 'glob' notation is a nice wildcard notation for pathnames that is common in gulp tasks. This task says: watch for any .js, .css, or .html file at any level in our 'client' directory and run the array of commands that follows - in this case, just reload our server.
A gulp task can consist of many other gulp tasks. By default, tasks passed in using array notation (like [serve.reload] above) run in series, causing a race condition and not guaranteeing any order of completion.
Sometimes this is not wanted. For example, if we wanted to do something crazy like fully transpile all our ES6 code into ES5 before it is served, we need to guarantee the entire build step is completed before the serve task.
run-sequence is a nice plugin that lets us run gulp tasks in series instead of parallel.
Install run-sequence: npm install run-sequence --save-dev
Update gulpfile.js
var gulp = require('gulp');
var serve = require('browser-sync');
var sync = require('run-sequence');
// ... previously defined tasks
// new default task
gulp.task('default', function(done) {
sync('serve', 'watch', done);
});Now whenever we run gulp, it will run the serve command in its entirety, then watch in its entirety, and then invoke the done callback to let gulp know all asyncronous tasks have been completed.
It's your turn! We've only just scratched the surface of what our build tools can do. Complete the following tasks to make your build tools even more useful.
Solutions to the Basic Requirements are on the solution branch. There are no solutions for the Extra Credit or Nightmare Mode challenges. Use the lessons learned from the Basic Requirements to figure these out on your own!
- Get a copy of this repo. It starts in the state that the introduction left off.
- Fork it
- Clone it
- Run
npm install
- Make sure Webpack and Gulp are installed globally.
-
npm install -g gulp -
npm install -g webpack
-
- Make our Webpack build step more convenient by transforming our CLI command into a
webpack.config.jsfile so that running justwebpackwill build our app.- Hint: Webpack Configuration
- Add a
buildtask to Gulp that uses this config and runs webpack in it's entirety before it serves the client.- It would suck if we had to run the
webpackcommand by hand all the time, right? - Hint: check out the npm package
gulp-webpack - Hint: Some properties that are needed to run
webpackare unnecessary when paired with gulp
- It would suck if we had to run the
- Get HTML and CSS imports working with Webpack loaders
- Add a CSS Preprocessor to Webpack (Stylus, LESS)
- Sourcemaps are invaluable when debugging transpiled code. Add them to Webpack
- Add a
deploytask to Gulp that deploys your bundle to Heroku
- Refactor the build system to use JSPM instead of Webpack
Contact us anytime for anything about this repo
enjoy -- AngularClass
Learn Angular in 2 days from the best