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
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
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.
Let’s see how Babel works in a simple sample code.
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.
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.
Atom, an open source editor, has a language-babel plugin that supports syntax highlighting for ES6 and JSX.
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.
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!