[ES6] 02. Traceur compiler and Grunt

Local Install:

npm install -g traceur
npm install grunt-contrib-watch
npm install grunt-traceur-latest

GruntFile:

module.exports = function(grunt){
    grunt.initConfig({
        traceur: {
            options: {
                experimental:true
            },
            custom: {
                files:{
                    'build/app.js': "app/js/**/*.js"
                }
            }
        },

        watch: {
            files:"app/js/**/*.js",
            tasks: "traceur"
        }
    });

    grunt.loadNpmTasks('grunt-traceur-latest');
    grunt.loadNpmTasks('grunt-contrib-watch');
}

Run:

grunt watch

So what Grunt file does is watch the app/js folder, if there is any javascript file changed, then it will fire the traceur task. It will compile the file into build/app.js file.

If app/js/app.js:

let square = x => x * x;
let add = (a, b) => a + b;
let pi = () => 3.1415;

console.log(square(5));
console.log(add(3, 4));
console.log(pi());

Then build/app.js:

"use strict";
var __moduleName = (void 0);
var square = (function(x) {
  return x * x;
});
var add = (function(a, b) {
  return a + b;
});
var pi = (function() {
  return 3.1415;
});
console.log(square(5));
console.log(add(3, 4));
console.log(pi());

If you want to get output result, First, you can run:

traceur build/app.js

basically using Traceur to run the compiled file and it'll give me the output.

25
7
3.1415

Otherwise I can create an HTML file, and just call it index, and if I load up my build file, so this is my compile file, and I try to run this in the browser, you'll see that it works just fine but that's because I haven't used any of the Traceur runtime stuff.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script src="build/app.js"></script>
</head>
<body>

</body>
</html>

If I do something a bit more complex like using classes, you'll see when I try to run this in the browser I'll get a "Traceur runtime is not defined," and that's because the compiled version has references to the Traceur runtime.

app/js/app.js:

class Polygon {
    constructor(height, width) { //class constructor
        this.name = 'Polygon';
        this.height = height;
        this.width = width;
    }

    sayName() { //class method
        console.log('Hi, I am a', this.name + '.');
    }
}

class Square extends Polygon {
    constructor(length) {
        super(length, length); //call the parent method with super
        this.name = 'Square';
    }

    get area() { //calculated attribute getter
        return this.height * this.width;
    }
}

let s = new Square(5);

s.sayName();
console.log(s.area);

What you'll need to do is include the Traceur runtime in your browser, which you should already have from installing your Node module.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/grunt-traceur-latest/node_modules/traceur/bin/traceur-runtime.js"></script>
    <script src="build/app.js"></script>
</head>
<body>

</body>
</html>

Now, when I switch over to Chrome and I refresh, you can see that Traceur runtime error went away and you have, "Hi, I am a square with 25."

Now you're all setup to use Traceur with grunt, but if you'd rather just use Traceur from the command line:

traceur --out build/app.js --script app/js/app.js --experimental