Getting Started With ES6 and Babel

ES6 (also known as ES2015) is an update of the javascript language which includes many new improvements.

Over the years the javascript community has been “hacking” the language writing libraries and utilities to add useful features to the language. Prototype, jQuery, angularJs, underscore, Lodash, backbone and a galaxy of others have all helped to extend javascript’s capabilities. ES6 has incorporated many of these extensions as native features, meaning by writing modern javascript you may reduce your dependency on extra utility libraries.

Let me show you how to get started!

Install Babel with ES2015 Addon

We will start by installing the Babel CLI and a preset available as a package from NPM so we can use the new syntax addition:

npm install --save-dev babel-cli babel-preset-env

Babel has many addons for a variety of language modifications (like JSX) but this one addon is all we need to get started.

Create a .babelrc File

The small file allows us to create a preset for babel usage:

{
  "presets": ["env"]
}

At this point we have Babel installed and preferences set!

Create Your JavaScript Files!

This is where the fun part starts, will be playing around with the new syntax! Here’s a very simple code snippet with arrow functions:

((con) => {
  ['yes', 'no'].forEach((item) => {
    con.log(item);
  })
})(console);

Cool huh?!

OK, sample is created, let’s transpile it into “traditional” JavaScript for browsers that don’t yet support ES2015!

Transpile the JavaScript

With Babel in place and our JavaScript code ready for treatment, we’ll trigger the process:

./node\_modules/.bin/babel src -d dest

That command transpiles every JavaScript file in the src directory and places it within the dest directory. Our sample JavaScript file becomes:

'use strict';

(function (con) {
  ['yes', 'no'].forEach(function (item) {
    con.log(item);
  });
})(console);

There you go….you can now start using ES6!!