ES6 : First sip of ES6 with traceur

19 Oct 2013

I was really curious about the upcoming ES6 features. After a long time, today I made time to try out some of the features using traceur-compiler.

Boilerplate

First thing I done was to setup a boilerplate to run ES6 with traceur.

<!-- index.html -->
<!doctype html>
<html class="no-js"> <!--<![endif]-->
    <head>
      <title>ES6</title>
    </head>
    <body>
      
    <script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"
        type="text/javascript"></script>
    <script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"
        type="text/javascript"></script> 
    <script>
        traceur.options.experimental = true;
    </script>
    <script type="text/traceur" src="calc.js"></script>
  </body>
</html>

In the above traceur.js is the compiler and bootstrap.js is used for compile all the script tags with type=”text/traceur” into vanilla js.

Some of the experimental features in traceur are truned off by default, so we need to enable all the experimental features using

<script>
    traceur.options.experimental = true;
</script> 

You can look into options for details.

Creating class

Now lets create a class for calculator and define a function named add.

// calc.js
class Calc {
    constructor(){
      console.log('Calc constructor');
    }
    add(a, b){
      return a + b;
    }
}

var c = new Calc();
console.log(c.add(4,5)); // prints 9

Hooray!! it works!!

Modules are not fully implemented on traceur, so until then, we need to use ES6 Loader polyfill.

Using Command line

If you want traceur to work on command line, You can install via npm.

npm install traceur -g

And we can run it by,

traceur calc.js

This will you compile and execute the calc.js and output to terminal.

If you wanna compile to another file,

traceur --out build/calc.js calc.js

This will store the compiled js to build/calc.js. You can trun on experimental features with --experimental option.

Using Grunt

If you want to set up traceur compiler with grunt, you can use grunt-traceur.

Install grunt-traceur

npm install grunt-traceur --save-dev

Configure traceur task

// Gruntfile.js
module.exports = function(grunt){
    grunt.initConfig({
        traceur: {
            options: {
                sourceMaps: true,
                experimental:true  // Turn on all experimental features
                blockBinding: true // Turn on support for let and const
            },
            custom: {
                files:{
                  'build/': ['calc.js']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-traceur');
}

You can run it by,

grunt traceur
If you find my work helpful, You can buy me a coffee.