[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

 

posted @   Zhentiw  阅读(376)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae