ES 2015 In The Browser

In my last post, I showed how you can have a modern module system with Browserify. This post is how you can write modern JavaScript (which, at the time of writing this post is ES2015) in the browser.

Depending on the browser and the language feature you want to use, you don't need to do anything special. Chrome, which uses the V8 JavaScript engine, already supports arrow functions and most other ES2015 features. Safari, which uses JavaScriptCore, not so much. :)

Here's a nice compatibility table showing where each browser is at at the moment, if you're curious.

However, if you want compatibility with all browsers you'll need a tool that will compile your ES2015 code to the old standard JavaScript every browser can handle, ES5.

The go-to tool a lot of folks are using is Babel. To get it running you'll need the Babel command line interface (I had to install it globally to get it to actually work on the command line):

npm install -g babel-cli  

You'll need a package.json file in your project if you don't already have it. Just run:

npm init  

as well as the Babel plugin for ES2015.

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

To get Babel to recognize the plugin, you'll need to mention it in your package.json:

    "babel": {
        "presets": ["es2015"]
    },

Now you can compile any file by running:

babel whatever_file.js -o whatever_complied_file.js  

whatever_file.js is our source file (the ES2015 code) and whatever_compiled_file.js is our destination file, the ES5 code.

For example, if you've got this ES2015 code:

var times = (x, y) => x * y

console.log(times(2, 3))  

It will compile to this:

"use strict";

var times = function times(x, y) {  
  return x * y;
};

console.log(times(2, 3));  

So, how can we get Babel and Browserify to work together? With Babelify! :)

If you haven't got Browserify installed, run:

npm install --save-dev Browserify  

Now let's install Babelify:

npm install --save-dev babelify  

Now you can run Babelify from the command line:

browserify front-end/js/main.js -o public/js/main.js -t [ babelify --presets [ es2015 ] ]  

In my project front-end/js/main.js is the path to my main JavaScript file.

-o tells Browserify that we're going to compile to a destination. public/js/main.js is our destination file.

-t tells Browserify that we're going to do a transform (compile from ES2015 to ES5).

after the -t we've got a set of brackets in which our transformation is specified, namely babelify to which we specify the es2015 preset with --presets [ es2015 ].

Wow, that's a lot of crap to type every time we want to do this. Instead of that mess, let's add it to our package.json as a script:

    "scripts": {
        "build": "browserify front-end/js/main.js -o public/js/main.js -t [ babelify --presets [ es2015 ] ]"
    },

Now all you have to do to run it is run:

npm run build  

And now you've got modules and modern JavaScript to play with in your browser! Pretty neat right?

Looking for a software developer?