ES2015 with Babel

This post is about writing ES2015 code with Babel so we can run this code across all major browsers. First we will learn what transpilers are and why we need them. Then I will list down the libraries/modules required for installing Babel which is one of the most popular JavaScript Transpilers to be used from the command line.

What is a transpiler?

The final approval for ES2015 was released back in June 2015. However, not all browser vendors have caught up with the latest specifications. This means that some of the ES2015 code that we write might not be supported out of the box by browsers like Chrome, Firefox and Safari. To get around this we can use these tools called transpilers which convert source code from one language to another language.

Babel is the most popular JavaScript transpiler today. It can take code written in ES2015 which is not yet supported by all browsers and transpile it to ES5 which is supported by all popular browsers.

Setting up Babel for the command line

  • Requires NodeJS >= 0.12
  • Install babel-cli globally
  • Install babel-preset-es2015 for a project. babel-preset-es2015 is a collection of Babel plugins necessary for transpiling ES2015 code. This module should be installed on a project specific basis.

Here’s the link to GitHub project which contains code of a simple demo script using ES2015 and Babel.