Trying out JavaScript ES6 using Babel

ECMAScript 2015, commonly referred to as “ES6”, is the current version of the ECMAScript Language Specification standard. The support for this new ES6 features is on its way though it will take some time to be fully supported in modern browsers. This blog post will introduce how to use Babel, a JavaScript transpiler, for those who want to try out ES6 in advance.

Babel transpiles ES6 to ES5

Traspiler is a specific term for taking source code written in one language and transforming into another language. So in this case, Babel is a tool to transform ES6 into ES5. Babel has no overhead and produces fairly readable output.

※ In this blog post, we are not discussing differences between ES6 and ES5, rather we will focus on how to use Babel.

Setting Up Babel

Installation

Babel requires Node.js and npm installed on your system. If you do not have them, install them beforehand. Installation can be simply done running following code in a command line:

$ npm install -g babel

Now we can run Babel like:

$ babel script.js

Linting ES6

Let’s install ESlint and babel-eslint altogether.

$ npm install -g eslint babel-eslint

You can now run ESlint in a command line.

$ eslint script.js

You can configure some rules in a .eslintrc file under your root directory.

.eslintrc
{
    "parser": "babel-eslint",
    "rules": {
        "strict": 0
    }
}

There are a lot more rules can be found on the List of available rules — ESLint — Pluggable JavaScript linter.

Using Babel

Let’s see how Babel works in a simple sample code.

ES6 code: sample.js.

var odds = evens.map(v => v + 1); 
var nums = evens.map((v, i) => v + i);

ES5 code transpiled by Babel.

Try it out — Babel

Babel has a Try it out page which allows to check their conversion in real-time. See how it’s actually converting and get the hang of it for later development.

Use Babel in Build Tools

In the actual development, we use JS build tools generally. Let’s take a look at how to combine Gulp with Babel for example. First, we will install Gulp and Babel module for Gulp.

$ npm install --save-dev gulp 
$ npm install --save-dev gulp-babel

Following gulp code demonstrates how to compile all JS files in a src/js directory into ES5 JS files and output to a dist/js directory.

References to other build tools are available on the Babel Setup page.

Using in a browser

When you use converted code from Babel in a browser, you will need a babel-polyfill. This babel-polyfill is a library that gives the ability to use new functionalities of ES6 for ES5. The polyfill is not included initially so we will install babel-core package in the project.

$ npm install --save-dev babel-core

After the installation, place browser-polyfill.js before ES5 script.

Example HTML polyfill:

ES6 Ready IDEs

Here is a list of IDEs that support ES6 syntax as of 08/25/2015.

IntelliJ IDEA 14

IntelliJ IDEA14 supports sentence-level syntax.

Go to Preferences and under Languages & Frameworks select JavaScript.

You can enable useful features like code formatting by selecting a proper script version. Of course, same features can be found on lightweight editor WebStorm as well.

Also, intellij-es67 plugin features JavaScript ES6/7 syntax improvements and additions for InteliJ IDEA 14.

Atom

Atom, an open source editor, has a language-babel plugin that supports syntax highlighting for ES6 and JSX.

Sublime Text

Sublime Text, usually compared to Atom, also has a syntax plugin.

You can find Babel — Packages — Package Control from Package Control.

Visual Studio Code

Visual Studio Code is a cross-platform editor from Microsoft. June’s release comes with support for ES6 syntax highlighting.

Visual Studio Code

Conclusion

Growing popularity of transpilers, such as Babel, suggests that many of the developers are eager to use ES6. Many of the functionalities can be implemented in ES6 already as we know that Babel transpiles them into ES5.

At the same time there are things we need to consider, like compatibility issues with your existing libraries or testing. I really hope that there won’t be huge problems with browser differences all developers had to deal with, like exhaustive Internet Explorer or cross browser support.

For these reasons, using transpilers such as Babel to maintain compatibility is a safe bet for now.

So dive in and start using ES6 with Babel today!