[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.

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