Understanding The Babel 6 JavaScript Transpiler Tutorial

Babel is a JavaScript transpiler. It can take ES2015, or now ES2016 code and make it work on your web browser by transpiling it to ES5. This is important because not all web browsers support the new ECMA standards as of this writing.

I wrote about Babel last year and it has changed somewhat. With Babel 6 you have presets. Earlier versions of Babel there was some built in transformations. In other words, it assumed transformations from ES2015 to ES5. Now you have specify which transformation you want in either your gulp, webpack, grunt or .babelrc file.

For the most part this tutorial will assume you are going to transform ES2015 code to ES5 using babel-preset-es2015. This preset includes all your favorite ES2015 features, like arrow functions, spread operator, classes and more.

There are a handful of experimental features being considered to be in the next version of JavaScript, like decorators and function-bind. Those presets are also available to you.

In this tutorial we'll use the Babel CLI to convert a ES2015 class to ES5 using the babel-preset-es2015. We'll also look at some example gulp and grunt files that use Babel 6.

Setup

First things first we'll need to install Babel. As mentioned in the documentation they recommend not to install babel-cli globally. So we'll heed that warning. (By the way we'll assume you have node installed, if not check out NVM)

$ mkdir babelexample
$ cd babelexample
$ npm init
$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015 

When running npm init just press enter all the way through. This will create a blank package.json file. The npm install babel-cli and npm install babel-preset-es2015 will save the babel-cli and babel preset to the package.json file and install it in the node_modules folder.

One other thing we need to do is tell babel to use the es2015 preset. Run the command below to create a new .babelrc file.

$ echo '{ "presets": ["es2015"] }' > .babelrc

This command will add the presets to a new .babelrc file using redirection.

The last thing we want to do is update the package.json file with a new script. Edit the package.json file and add the build line to the scripts section. When all is done it should look something like this.

// package.json
{
  "name": "babelexample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.7.5",
    "babel-preset-es2015": "^6.6.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib"
  },
  "author": "",
  "license": "ISC"
}

We can use npm scripts to run some common commands. Of course any larger project you'll probably want to use a task runner like gulp or grunt to make this process easier. For this example we'll just use this.

This also assumes we have a src and a lib folder. The src folder will be the input folder while the lib folder will be the output folder (designated by the -d). So we'll create those directories as well. You can certainly use whatever directories you like.

$ mkdir src
$ mkdir lib

Quick Class Example

Now that we have everything setup we can now try converting over some code. Let's create a Polygon.js file in the src folder.

// src/Polygon.js

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}

This is a fairly simple example using a class. Now we can try to convert it using the command line.

$ npm run build

There it is. It should then output something like this.

> babel src -d lib

src/Polygon.js -> lib/Polygon.js

The file in the lib folder will now be in ES5 JavaScript code. That file is what you would use in your project. Check it out, and you'll understand how the conversion went.

If you check the lib folder and the Polygon.js file is exactly the same as the src folder then their is something wrong with your presets. Check to make sure your .babelrc is setup correctly.

Watching

Within the scripts section in the package.json file you can run any babel-cli command you want. For example let's say you want your output to update as soon as the file changes. Update your package.json file and add a watch.

// package.json
"scripts": {
    "build": "babel src --watch -o poly.js"
  },

Now changes to the Polygon.js file in the src folder will automatically be updated in the poly.js in real time. A list of all the commands you can use is here.

Grunt

If your using grunt your file may look like this.

// grunt
require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
  "babel": {
    options: {
      sourceMap: true
    },
    dist: {
      files: {
        "dist/app.js": "src/app.js"
      }
    }
  }
});

grunt.registerTask("default", ["babel"]);

Once again you'll need to make sure you install the presets and update the .babelrc.

Gulp

Your gulp file may look like this with Babel.

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

Once again you'll need to install the presets and .babelrc.

For more sophisticated application you can specify the preset in your gulp or grunt files so you don't need the .babelrc. We'll save that for a later time.

Wrapping Up

In this tutorial we took a look at Babel 6, how to find presets, and how to use npm scripts to run it. We also took a peak at gulp and grunt files.

What's Next?

This was just a brief example of all the latest in Babel. Please sign up for my mailing list below! I'll send you all the latest and greatest information on JavaScript.