ECMAScript Harmony – Compile ES6 code to ES5 using Traceur/Babel

Posted on by Naeem

ECMAScript Edition 6 (ES6) comes with lot of features such as classes, generators, destructuring, modules and much more. Currently ES6 code is not yet implemented/supported in all browsers and JS engines, you might wanna look here. Using Firefox and chrome(latest) developer tools you can test features like arrow functions etc. for chrome you will also need to enable chrome harmony flag. chrome://flags/#enable-javascript-harmony.

It might be bit early but you wanna to use latest ES6 features and here you will need a compiler that compiles your ES6 code down to regular Javascript that could run in browsers. currently we have two most famous compilers Traceur and Babel for this purpose.

Traceur

You can try Traceur in several ways:

  • Include Traceur in a Web page and it will compile ES6 code on the fly.
  • Or use node to compile ES6 to ES5 offline and include the result in Web pages or just run the result in node.

For browser you can include following script and it will convert automatically.

<!DOCTYPE html>
<html>
 <body>
 <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
 <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
 <script type="text/javascript">
 var arr = [{a:1,b:1},{a:1,b:4}];
 console.log(arr.map((x)=>x.a));
 </script>
 </body>
</html>

In above example first file included above is the traceur compiler; next comes a small file of JS to apply the compiler to the Web page. Traceur itself written in ES6. so my simple example manipulate the array using high order function .map  that takes arrows function as callback.

You can also import ES6 modules

<script type="module">
 import './module.js';
</script>

Other way is using offline compilation. for that you need node installed. Traceur includes a shell script traceur to compile ES6 code to ES5/Regular JavaScript.

./traceur --out scripts/module.js --script module.js

We can test the module.js we just compiled like:

<html>
<head>
<script src="bin/traceur-runtime.js"></script>
<script src="script/module.js"></script>
</head>
<body>
</body>
</html>

This runtime file contains polyfills as well as helper functions which reduce the generated code size. you can find more about traceur here.

Babel

Babel is another compiler for EcmaScript6.

npm install babel-core es6-module-loader

You will need to include following files to your web page.

  • node_modules/babel-core/browser.js
  • node_modules/es6-module-loader/dist/es6-module-loader.js

Following is example to import ES6 module

<!DOCTYPE html>
<html>
<body>
<script src="js/vendors/browser.js"></script>
<script src="js/vendors/es6-module-loader.js"></script>
<script src="js/module.js"></script>
 <script>
 System.transpiler = 'babel';
 import Module from 'js/module'
 var instance = new Module();
 </script>
</body>
</html>

Let’s setup development envirnmnet and start using ES6 using Babel in your applications. youll need to install following presets and plugins

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0

babel-preset-es2015 is for ES6 and babel-preset-stage-0 is for ES7 experimental features, this is not required in our case, it may be good idea to have it.

Simple express application written using ES6 could be:

let express = require('express'),
		app = express(),
		PORT = 3636;

app.get('/', (req, res) => {
	res.status(200);
	res.write(JSON.stringify({'data':"visiting home url."}));
	res.end();
});

app.listen(PORT, ()=>{
	console.log('listening at port: '+ PORT);
});

babel express.js --out-file out/express.js

Above command will transpile ES6 code from express.js to out/express.js. so that will normal JavaScript which can run in ES5 or less supported environments.

Following is the output:

'use strict';

var express = require('express'),
    app = express(),
    PORT = 3636;

app.get('/', function (req, res) {
	res.status(200);
	res.write(JSON.stringify({ 'data': "visiting home url." }));
	res.end();
});

app.listen(PORT, function () {
	console.log('listening at port: ' + PORT);
});

Also it is possible to compile whole directory containing ES6 code files using following way:

babel src --out-dir out