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