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
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Build a Toggling Announcement Slider Using MooTools 1.2

    A few of my customer have asked for me to create a subtle but dynamic (...I know...) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick...

  • By
    Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...

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!