Lesson Tuesday

Most students use Chrome at Epicodus. Chrome is an evergreen browser; evergreen browsers are constantly (and automatically) being updated. One nice thing about Chrome is that it’s almost entirely compatible with ES6. However, many browsers aren’t. Because of this, we need to transpile our ES6 code to ES5 code that all browsers can read. Transpilation is the process of compiling code from one language to another (or in this case, one version to another).

To do this, we’ll use Babel, a popular JavaScript transpiler. There are many different ways to set up Babel; we’ll use an npm package called babelify. We’ll also need to install the es2015 presets so Babel knows how to transpile the code. We’ll install both with one command:

$ npm install babelify babel-core babel-preset-es2015 --save-dev

Next we need to update our Gulpfile so our code is transpiled when we build. We’ll add babelify as a dependency and then update our jsBrowserify task.

gulpfile.js
...
var babelify = require("babelify");
...

gulp.task('jsBrowserify', ['concatInterface'], function() {
  return browserify({ entries: ['./tmp/allConcat.js']})
    .transform(babelify.configure({
      presets: ["es2015"]
    }))
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./build/js'))
});

Karma will browserify and test our code separately from Gulp so we also need to update our karma.conf.js file as well. Specifically, we’ll add an option for browserify. Here, we’ll babelify our code.

Karma.conf.js
module.exports = function(config) {
  config.set({
    ...

    preprocessors: {
      ...
    },
    plugins: [
      ...
    ],
    browserify: {
      debug: true,
      transform: [ [ 'babelify', {presets: ["es2015"]} ] ]
    },

    ...

  })
}

While we’re at it, let’s also configure jshint for ES6 as well. If we don’t, we’ll get warnings and errors when we use ES6 syntax. Create a .jshintrc file in the root directory.

.jshintrc
{ "esversion":6 }

Now when we run $ gulp jshint, our linter won’t complain about ES6 syntax.

We can now build, test and lint ES6 code. Let’s move on to learning some ES6!