Introduction to Babel JS

Babel is a javascript compiler. Compilers usually transform your code into bytecode or binaries. But, Babel transforms your javascript code to javascript code. Babel compiles the code from ECMAScript 6 and transforms it into ECMAScript 5. It allows you to use all the awesome features of ES6 and compile it to ES5 so that you can use it in your production environment.

Babel has become an important tool in the everyday developer’s life, because, browser vendors are comparatively slower to adopt the new ES 6 features. Thus, the support for ES6 on different browsers is quite poor. But we don’t have to worry, as we have Babel to help us out.

Babel uses configurable plugins which are applied to the source code and converted to application code. Most of the transforms are for converting specific ES2015 and ES2016 code into ES5 code. However plugins for wrapping react components, static type checking and contracts have been written using Babel.

For Example, below is a function which is written using ES6

var a = () => {};
var a = (b) => b;

const double = [1,2,3].map((num) => num * 2);
console.log(double); // [2,4,6]

var bob = {
  _name: "Bob",
  _friends: ["Sally", "Tom"],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};
console.log(bob.printFriends());

When you compile this function using Babel, you would get the result below:

var a = function a() {};
var a = function a(b) {
  return b;
};

var double = [1, 2, 3].map(function (num) {
  return num * 2;
});
console.log(double); // [2,4,6]

var bob = {
  _name: "Bob",
  _friends: ["Sally", "Tom"],
  printFriends: function printFriends() {
    var _this = this;

    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};
console.log(bob.printFriends());

The most important advantage of Babel seems to be its compatability with ReactJS and JSX. React JS being ES6 ready, everyone needs Babel so that their code can be transformed to ES5 and be compatible across multiple browsers. Also, React comes with the default set of syntax-transformers that ship with Babel. All the features used by React including ES2016, classes and others are bundled into a preset called the babel-preset-react which you can use in your application.

Set Up

You will need to have node.js and npm installed on your system before you start with Babel. You can install Babel with the command below:

$ npm install -g babel

Since its a global installation, some of you might want to add sudo before that command. Now you can run Babel using the command below:

$ babel script.js

Using Babel

A simple function to calculate factorial of a number in ECMAScript 6 can be written as below:

let factorial = (a) => (a<=1 ? 1 : a * factorial(a-1))

Suppose you have this code in a file factorial.js. If you process this file using Babel:

$ babel factorial.js

You will get the output below

"use strict";

var fib = function fib(a) {
  return a <= 1 ? 1 : a * fib(a - 1);
};

It is that simple. If you want to try and get more accustomed to Babel, you can use the REPL present on Babel’s site

Possible caveats when using Babel