Do You Need Babel?

Some ES2015 features have been implemented in Node.js already:

• Arrow functions
• Block scoping (let and const)
• Classes
• Collections (Map, WeakMap, Set, and WeakSet)
• Typed arrays
• Generators (function* and yield)
• Binary and octal literals (e.g. 0b0100 and 033)
• Object literal extensions
• Promise
• Template strings
• ... etc.

You can find the full list in ECMAScript 2015 (ES6) in Node.js. They are working out-of-box and having native support from V8 developers. If you only need these features, you can simply upgrade to latest Node.js.

If you wish to use other ES2015 features (e.g. module system) or you can't upgrade to latest Node.js, then you can convert your ES2015 source code with Babel.

Supported Features

Babel 6 covers following ES2015 features:

• Arrow functions
• Block scoping (const and let)
• Classes
• Destructuring
• for-of statement
• Binary and octal literals
• Modules (compile to CommonJS)
• Template strings
• ... etc

You can check Learn ES2015 or ES2015 Preset for more details. However, you should aware that some features are still missing from Babel 6.

How to Use Babel?

There are 3 methods to run ES2015 with Babel:

1. Convert ES2015 source code to ES5 with babel command, and run the output files with node command.
2. Run ES2015 source code with babel-node.
3. Use babel-register as a require hook to invoke Babel transpiler.

In the next section, we will discuss the first and the second method, which utilize the babel-cli package. After that, we will cover the third method at the end of this article.

Using Babel Command Line Tools

Before we can start, we have to install babel-cli and babel-preset-es2015:

$ npm install babel-cli babel-preset-es2015

babel-cli package contains two important commands:

• babel -- A transpiler which transforms the input source code. If es2015 preset is specified, then Babel transpiler will convert ES2015 source code into ES5.
• babel-node -- An interpreter which will run the transpilation on-the-fly.

And babel-preset-es2015 package consists of several Babel transformation plug-ins for ES2015.

For example, given an ES2015 source file main.js:

function hello(name) {
  console.log(`Hello, ${name}`); // template literal
}
hello('world');

We can convert it with babel:

$ babel --presets es2015 -o output.js main.js

This is the generated output:

'use strict';

function hello(name) {
  console.log('Hello, ' + name + '!'); // template literal
}
hello('world');

Great! The template literal is translated.

Finally, we can run the output script with node:

$ node output.js
Hello, world!

We can deploy the output files to the production environment which does not have Babel. The output files can be interpreted by oridinary node command without problems.

$ babel-node --presets es2015 main.js
Hello, world!

{
  'presets': ['es2015']
}

$ babel -o output.js main.js

$ babel-node main.js
Hello, world!

Babel Require Hook

The third method is to hook Babel transpiler with the require hook from babel-register package. We don't need babel-cli package when we are using babel-register. The require hook will utilize Babel API directly. Here are the instructions to setup the require hook.

First, install babel-register and babel-preset-es2015:

$ npm install babel-register babel-preset-es2015

Second, create an invoke stub to setup babel-register and import our module. Let's call it run.js in our example:

require('babel-register')({
  presets: ['es2015']
});
require('./main');

Now, we can run our program with:

$ node run.js
Hello, world!

Yeah! It works. However, please be aware that the invoke stub itself is not transpiled, thus we have to write the invoke stub in ES5.

Conclusion

ES2015 is the latest Javascript standard and Babel is a transpiler which can convert ES2015 to the widely supported ES5. In this post, we have covered three different methods to run ES2015. Hope you enjoy this article and happy hacking with ES2015.