Getting Started with ES6 (ES2015) and Babel

By  on  

If you don't do much work with Node.js there's a good chance you haven't explored the new syntax additions to the JavaScript language provided by ES2015.  These language additions include arrow functions, classes, block scoping, and more.  These language additions have slowly made their way to Chrome and Firefox so if you haven't taken the time to learn ES2015:  now is the time!  And what better way to do that than writing your JavaScript in ES2015 and using Babel to transpile it into "traditional" JavaScript for the browser?  Let me show you how to get started!

Step 1:  Install Babel with ES2015 Addon

Babel's CLI is available as a package from NPM so we'll start by installing it:

npm install babel-cli

Next we'll install the babel-preset-es2015 addon so we can use the new syntax additions:

npm install babel-preset-es2015

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

Step 2:  Create a .babelrc File

The small file allows us to create a preset for babel usage; since we only have the  babel-preset-es2015 addon, we'll only add that to the file:

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

At this point we have Babel installed and preferences set!

Step 3:  Create Your JavaScript Files!

The fun part will be playing around with the new syntax!  Here's a very simple code snippet with arrow functions:

// Just playing around, this doesn't really do anything
((con) => {
  ['yes', 'no'].forEach((item) => {
    con.log(item);
  })
})(console);

The babel-preset-es2015 addon also supports JavaScript classes and more but let's keep our sample simple.  OK, sample is created, let's transpile it into "traditional" JavaScript for browsers that don't yet support ES2015!

Step 4:  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);

You'll recognize that as something that you've been writing for years!

It's important to note that if you don't care about the browser you can simply run node myFile.js and ensure your code works properly (since current node is fitted with ES2015 syntactic sugar).  It's also important to point out that arrow functions were simply my example and that ES2015 has many, many more syntactical updates. Moreover the arrow function syntax changes the implications of binding so please study each type of syntactic update before using!

Take the time to play around with ES2015 -- it will be in all major browsers soon and should be quicker to type and more compact in size.  Once you start you'll look to use the new syntax everywhere!

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    PHP / MooTools 1.2 Accordion Helper

    The MooTools Accordion plugin seems to be the plugin that people seem to have the most problems with. It's an awesome plugin, so I can see why so many people want to use it, but I think that may be part of the problem.

  • By
    The Simple Intro to SVG Animation

    This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...

Discussion

  1. You can try ES2015 directly in your browser with http://esnextb.in (https://github.com/voronianski/esnextbin). What’s good is it allows to import NPM modules directly in browser.

  2. Gaurang Tandon

    “./node_modules/.bin/babel src -d dest” looks a bit too long. I would just use gulp, takes five minutes to set up, but makes this task (and many others) pretty easy, especially, with its “default” task and “watch” files functionality.

    • I also use gulp but I don’t want to require it for this post ;)

  3. Daniel Latter

    Hi, I followed the article, but I get a TypeError:

    ["yes","no"].each is not a function

    It does transpile the arrow function correctly though, Am I missing something?

    • shabnam

      I got this error too

    • Sorry! It’s .forEach

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!