Attention frontend developers…

There are three things we can be sure of: that we’re all gonna die some day, that the new iPhone will outperform the current model, and that ES6 is coming. ES6 or actually ES2015… not to mention ES7, a.k.a. ES20XX. Anyway, the amount of goodness ES6 carries along is truly hard to express with words. The problem though, “as usual,” one might say, is browser support. The spec is nearly done and browser vendors did a good job implementing some of its features into stable releases of browsers, but not nearly as much as we’d wish. On the other hand, there are still browsers (yes Internet Explorer, I mean you) that are widely used, unlikely to be updated, and either have limited or no support for ES6 whatsoever. The day, however, when we’ll be finally able to write code like this:

let uc = (...args) => args.map(arg => arg.toUpperCase());

instead of:

function uc() {
  var slice = Array.prototype.slice;
  
  return slice.call(arguments).map(function (arg) {
    return arg.toUpperCase();
  });
}

might not be as be as distant as one might think, thanks to transpilers. By using a transpiler, we’re able to convert our ES6 code into something more widely supported, like ES5. Assuming that IE8 is no longer a concern for us, we can start transpiling today. One example of such software is Babel.js. It originated in a project named 6to5 but then joined forces with another project, esnext, to be finally renamed Babel (the name 6to5 didn’t seem futureproof). Babel has support for numerous ES6 features, but is also capable of transpiling funky bits of code like the proposed ES7 async functions (the support is hidden behind the --experimental though).

 

Ok, having the theory behind us, how to get started? Luckily, Babel is highly pluggable and will fit easily into most of JavaScript workflows one might come up with. These include:

 

Command line

Once we have Babel installed ($ npm install -g babel) we can use it straight from the command line as simply as:

$ babel source.js

We can also save the compiled output as a file with:

$ babel source.js --out-file compiled.js

Repl

Babel comes with its own repl, which is basically a Node.js repl transpiling the code in real time. One can run it by simply typing:

$ babel-node

Node-style

It’s also possible to run scripts with Babel like you normally would with Node.js (of course, they get transpiled first):

babel-node source.js

Require hook

Once we install Babel locally ($ npm install babel) and put the following line in our code:

require('babel/register');

Babel plugs into the Node global object’s require method to transpile required modules on the fly. How cool is that?!

Browserify

If you happen to use CommonJS modules in the browser and bundle them with Browserify, Babel’s got you covered. The only thing to do in order to make use of Babel’s magic is installing babelify ($ npm install babelify) and adding 'babelify' to the transform array within your package.json file. A few keystrokes and voilà — your modules get transpiled upon bundling.

Task runners

Babel also plays nicely with various build automation tools: Grunt and Gulp to name a few. Repositories for corresponding tasks can be found in Babel’s GitHub:

• grunt-babel
• gulp-babel

 

Happy transpiling!

 

Image by Brent Moore