products

Playing with ES6 code

How to run ES6 (EcmaScript2015) code using 6to5 transpiler.

I am looking at AngularJS 2, which uses native ES6 modules via AtScript. Let us see how we can use ES6 code today via 6to5 and io.js.

install tools

First, let us install a few tools to make sure we can experiment from the command line. Install latest Node / io.js version manager nvm (I installed it using the curl command shown on their website). Then install io.js

nvm install iojs
$ iojs -v
v1.1.0

Now you have io.js available with lots of stable ES6 features available by default, see io.js es6 notes. Because we will need more than io.js implements (classes and default arguments), let us install ES6 to ES5 transpiler. I picked 6to5 because it implements the most features from the standard, slightly edging out the traceur.

sudo npm install -g 6to5
$ 6to5 -V
3.5.3

First use case

ES6 uses modules and classes, here is a small example taken from Preparing for the future of AngularJS.

class Greeter {
  sayHi(name = 'Anonymous') {
    console.log(`Hi ${name}!`);
  }
}
var greeter = new Greeter();
greeter.sayHi();

This example shows several ES6 features:

We can immediately run this code by piping 6to5 output to Node / iojs

$ 6to5 greeter.js | node
Hi Anonymous!

Nested use case

It is doubtful that all our ES6 code would be in a single file. Most likely we will split code across multiple files. For example the same greeting example could be across two files. Instead of CommonJS module.exports and require syntax, ES6 uses export and import structures, see modules.

// greeter.js
export class Greeter {
  sayHi(name = 'Anonymous') {
    console.log(`Hi ${name}!`);
  }
}
// index.js
import { Greeter } from './greeter';
var greeter = new Greeter();
greeter.sayHi();

How do we run this code? The simplest way I think is suitable for small projects is to use a Node require hook provided by 6to5. Just install local 6to5 module and create another script that loads the global require hook and loads the ES6 code.

npm install 6to5
// start.js
require('6to5/register');
require('./index');

Now run start.js using Node / IO.js

$ node start.js 
Hi Anonymous!

I love Node hooks ;)

Sublime syntax highlighting

I prefer using Sublime Text 3 and here is how I configured the syntax highlighting for ES6 code. First, I renamed greeter.js and index.js to greeter.es6 and index.es6. Then I installed JavaScriptNext Sublime package. Then open one of the .es6 files, and select View -> Syntax -> Open all with current extension as... -> JavascriptNext syntax. Then you will get the correct syntax highlighting.

Load CommonJS from ES6 modules

If you need to load an existing CommonJS module, it is very simple. For example load load default name we could use this code

// default-name.js
module.exports = 'World';
// greeter.es6
import defaultName from './default-name';

Load ES6 from CommonJS module

If you need to load a value from ES6 module, just require the module, but specify particular name (because ES6 can export multiple values)

// actual-name.es6
export const name = 'World';
// default-name.js
module.exports = require('./actual-name.es6').name;

Related