Tutorial: Installation, and Usage of the 6to5 CLI

If you’re like me, you’ve heard all kinds of awesome things about ES6 – fat arrow functions, array destructuring, generators – and you want a piece of the action.

But how do we get started? The latest browsers already have some of ES6 implemented. However the implementation is by no means complete, and we can’t rely on people using the latest browsers to access our apps. So what’s the solution?

Transpilation

This means running your ES6 code through a program that will compile it down to regular ES5 code that will run in today’s (and yesterday’s) browsers.

There are a number of transpilers available (and I might do a comparison in a later post) but for today I’ll be using 6to5.

All code used in this post is available on github.

Installation

Before we can use 6to5, we need to install it. Luckily this is fairly straightforward.

Prerequisites

6to5 is an NPM package, so you’ll need Node installed on your computer. If you’re reading this you probably already have Node installed, but just in case here’s a guide from HowToNode.

I used Ubuntu while creating this tutorial, but it should be applicable to any platform that has Node installed.

Installing with NPM

To install 6to5, we just need to install it’s NPM package. We want to use the command line client, so we’re going to install it globally – this lets us use the 6to5 command directly, without bothering to invoke node.

So we need to run:

And we’re done! – well once the command is finished running at least. Now we can get down to converting our shiny ES6 code to ES5.

Usage

Compile a script

Our first step is to write some ES6. So let’s write a little file using ES6’s Arrow Function syntax:

Save this file; then in the same directory run this command:

which gives us the following output:

We have ES5 code! Which is great, but not that useful to us as-is. What we really want is to save it out to a file. For that we use the -o (short for –out-file) option.

Bingo! Now we’ve got a file we can run in a browser.

Compile modular code

6to5 has support ES6 modules, and will output a number of different module formats. By default it will use CommonJS (for use with e.g. node, browserify) but it will also output AMD if you’re using RequireJS, plus several more. It even allows you to define custom module formats.

For this example we’re going to use Node, so we’ll tell 6to5 to use CommonJS modules. Here’s our two example files:

Now we run the files through 6to5, using the handy –out-dir option to specify a directory for our output rather than a file.

Now if we look in the moduleout directory we just created we find these output files:

This is great, we’ve gone from ES6 modules to the CommonJS format that we can use in Node. Like so:

If you’re using Require in you’re project, you can also have it output AMD code by changing the modules option from common to amd.

Using Sourcemaps

We’ve now got our generated ES5 code we can run in Node and browsers. However, now the code we’ve written isn’t the code that’s running, could have a nightmare on our hands when we come to debug our code.

Sourcemaps to the rescue! We can use sourcemaps to let the browser know how our code generated by 6to5 maps back to the original. Generating sourcemaps using 6to5 is easy, we just add –source-maps to the end of our 6to5 command. To demonstrate we’re going to use a slightly modified version of our first file.

and we’ll tell 6to5 to output the sourcemap along with our ES5.

the output:

The line on the end tells the browser where to look for the related sourcemap. To show this in action we’ll create a simple web page, then open it up using chrome devtools.

Now if we look in devtools, we can see our original code, and our generated code as well. We can also put breakpoints on our original code, step-through and inspect it using the tools devtools gives us.

sourcemaps-chrome

Polyfill

Now we’re using 6to5, and are feeling incredibly proud of ourselves for getting a head start on ES6 – we decide to have a go at using ES6 Symbols. We write our code –

– then process it with 6to5.

Okay, that’s basically the same. Strange. What if we try and run it?

symbol

Symbol is not defined? What gives?!

Reading the 6to5 FAQ we see there are some features which need the 6to5 polyfill to function properly. Symbols being one of them.

When we’re using Node (or browserify) using the polyfill is easy. We simply require in the polyfill module that’s part of 6to5.

For code running in the browser there’s another step. First we need to locate the 6to5 directory that was created by NPM when we installed the package. On my computer this is:

The polyfill script – browser-polyfill.js – is in here. We need to copy it into the same directory as our other scripts, and then we include it in our HTML file.

The only caveat is that the polyfill must be included before the generated code that uses it.

Summary

We now know how to install and use 6to5. Letting us use ES6 features in browsers that only support ES5. We’ve also covered generating sourcemaps, to aid debugging; and the 6to5 polyfill for the ES6 features that need it.

If you have any questions, please comment below!