Introduction to writing ES6 code using Babel

Babel and ES6 is in the mouth of everybody since a long time now. Experienced JavaScript developers recommend writing JavaScript code using the ES6 standard with Babel.

So after a long while I got myself up and tried out using Babel. How this went and worked out I want to share with you now.


In general Babel is a JavaScript compiler which transforms a piece of JavaScript code using a certain syntax (e.g. ES6 code, JSX) into JavaScript code which is even supported by old browsers. This process of source-to-source transformation is also known as transpiling.

On its own Babel does not do much. It uses plugins to transpile code. Using this approach everybody can create plugins for Babel to transpile code.


Let’s create a simple project using ES6 and Babel.

$ mkdir babel-test && cd babel-test
$ npm init
...
$ npm install babel-cli --save-dev

Explainations on how to use npm is out of the scope of this post. You should be able to understand these commands to continue reading.

babel-cli is the standalone command-line interface for using Babel. Let’s try it out by using the ES6 interpolate variables (which I love in Ruby):

// main.js
var name = "Babel";
console.log(`Hello ${name}!`);
$ ./node_modules/.bin/babel main.js

Passing just a file to Babel will only print it to stdout. As we notice the output does not differ from our ES6 code. As stated before Babel does not do anything on its own. For transpiling code plugins are needed. And for transpiling ES6 code the following plugin exists:

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

Now all we have to do is to tell Babel to use this plugin. For this Babel uses a configuration file called .babelrc.

// .babelrc
{
"presets": ["es2015"]
}

Now let’s try it again:

$ ./node_modules/.bin/babel main.js
“use strict”;
// main.js
var name = “Babel”;
console.log(“Hello “ + name + “!”);

Great! It worked! There are some handy options which the babel-cli offers. For example to minify and strip away the comments aswell:

$ ./node_modules/.bin/babel --minified --no-comments main.js
"use strict";var name="Babel";console.log("Hello "+name+"!");

Now we want to get ready for using Babel in our development process. Transpiling to stdout is naturally not very handy in this case. In the babel-cli help we can find these two relevant options:

-o, --out-file [out] Compile all input files into a single file
-d, --out-dir [out] Compile an input directory of modules into an output directory

Now in our case we could use the out-file to transpile into a new file but we want to compile a complete directory in case we add new source files later.

$ mkdir src dist
$ mv main.js src

Now we will open the package.json and add a new npm script which will build our project.

{
“name”: “babel-test”,
...
“scripts”: {
“build”: “babel src -d dist”
},
...
}

Now let’s add some files in our src folder:

// src/lib/print_name.js
module.exports = function(name) {
console.log(`Hello ${name}`);
}
// src/main.js
var printName = require('./lib/print_name');
printName('Babel');

Now we will build and execute our little project:

$ npm run build
$ node dist/main.js
Hello Babel

It worked! Now we are basically ready to create our project in ES6 using Babel!