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
    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...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Submit Button Enabling

    "Enabling" you ask? Yes. We all know how to disable the submit upon form submission and the reasons for doing so, but what about re-enabling the submit button after an allotted amount of time. After all, what if the user presses the "stop"...

  • By
    Create an Animated Sliding Button Using MooTools

    Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a...

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!