Alvin Pascoe

ES6 (or ECMAScript 2015) is here and ready to use. As always, there's going to be a compatibility crossover period between ES5 and ES6. However, instead of waiting until all browsers support the update, the smart move is to learn (and code) in ES6 now and use a transpiler to turn it into a production ready ES5 distribution version.

I've been using the Babel transpiler to make this conversion. Specifically, the gulp-babel npm package.

The steps I follow to get this setup are below:

Step 1 - Install Node.js

npm stands for 'Node Package Manager' and is automatically installed when you install Node.js. Since we're going to be using npm, ensure you have Node.js installed. The easiest way is to visit their website and download the installer.

Step 2 - Install gulp globally

gulp is a task runner, we use it to easily automate any number of common processes. We'll use it to automatically create an ES5 version of our work whenever we save the ES6 version.

If you don't have gulp globally, you'll need to install it. Seeing as we now have npm, let's use it to install gulp. Enter the following in a terminal:

npm install --global gulp-cli

If you receive and error mentioning permission denied, try the following:

sudo npm install --global gulp-cli

Step 3 - Add gulpfile.js

In order to use gulp, we need to tell it what to do...we do this using a gulpfile.js.
For now, simply create an empty gulpfile.js at the root of your project (this will make initialising our packages a little easier).

Step 4 - Navigate to project files

This is an easy one. My project files consists of two directories src and dist.
src contains my ES6 file app.js and dist is currently empty, but this is where the ES5 version of app.js will be saved.

Since we're going to be using the terminal to use Babel, navigate to your project files in the terminal.

Step 5 - Initialise packages

Before installing any npm packages, we need to create a package.json file to keep track of them. We can do this by simply typing the following:

npm init

You'll then be asked a few questions about the project, you can fill them in now or just press enter to use the defaults (you can always edit this later by editing the package.json file).

Just make sure the entry point: is set to gulpfile.js.

Step 6 - Install gulp-babel

Next, we're going to install the gulp-babel. We're going to be installing this locally to the project (that's why we needed to navigate to the project in the terminal).

npm install --save-dev gulp babel-core gulp-babel babel-preset-es2015

Notice that we're also installing a local version of gulp. This is because the global and local versions are for different purposes. The global install of gulp allows us to use the keyword gulp in the command-line terminal and the local version is the one that will actually be run within our project (this means different projects can have different gulp versions...and won't break unexpectedly due to global gulp updates).

The --save-dev flag sets these packages as a dependency within development environments.

Step 7 - Complete gulpfile.js

Now all our packages are installed, we need to tell gulp what to do. Open your blank gulpfile.js and add the following:

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
  return gulp.src('src/app.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'));
});

All we're doing here is importing the necessary packages and creating gulp's 'default' task (this means we can run it by simply typing gulp in the terminal). The 'default' task will take our ES6 src/app.js file as input and output a converted dist/app.js ES5 version.

Optional Step 7.5 - Watch files for changes

Currently, when we want to convert ES6 into ES5, we'll need to run gulp in the terminal each time. We can improve this by asking gulp to watch our src/app.js source file and whenever it is saved, automatically create an updated dist/app.js file.

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('es6', () => {
  return gulp.src('src/app.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['es6'],() => {
  gulp.watch('src/app.js',['es6'])
});

Now, we can simply run the following command to watch our ES6 file and automatically update the ES5 file on save:

gulp

To exit gulp, press ctrl/cmd + c.

If you experience issues on Ubuntu, it may be related to the number of files a user can watch (thanks ajithrn). To increase this number, try entering the following:

echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

We've now added everything we need to transpile ES6 to ES5!

Step 8 - Write ES6

Let's open our src/app.js and test it out. Write some ES6 code and save it:

let greeting =
`Hi There.
I'm a multiline string`;

let speak = (words) => console.log(words);

speak(greeting);

Step 9 - Transpile code

If you performed the optional gulpfile.js step, you don't need to do anything here...your ES5 code will automatically when the ES6 code is saved.

If you didn't follow the optional step, then you'll need to run gulp manually:

gulp

Step 10 - Check ES5

Simply open your ES5 file (dist/app.js in my project) and check that your ES6 version has been correctly converted to ES5.

"use strict";

var greeting = "Hi There.\nI'm a multiline string";

var speak = function speak(words) {
  return console.log(words);
};
speak(greeting);

You should now be all set to start writing ES6, safe in the knowledge that your code will be compatible in all browsers!