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

[ES6] 02. Traceur compiler and Grunt的更多相关文章

  1. [ES6] 01. Intro to ES6 and traceur compiler

    ---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScri ...

  2. WebStorm中使用ES6的几种方式

    本篇总结几种在WebStorm下使用ES6的方式. 首先要选择Javascript的版本.依次点击"File","Settings","Languag ...

  3. es6 import 与 export

    1.export 命令 export 命令用于规定模块的对外接口. 一个模块就是一个独立的文件.该文件内部所有的变量,外部无法获取.要想外部能够读取模块内部的某个变量,就必须使用 export 关键字 ...

  4. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  5. JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

    JavaScript资源大全中文版(Awesome最新版)   目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...

  6. JavaScript资源大全

    目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 模板引擎 数据可视化 编辑器 UI 输入 日历 选择 文件上 ...

  7. Awesome Javascript(中文翻译版)

    [导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架 ...

  8. Gulp思维——Gulp高级技巧

    本文翻译自Getting gulpy -- Advanced tips for using gulp.js 感受过gulp.js带来的兴奋过后,你需要的不仅仅是它的光鲜,而是切切实实的实例.这篇文章讨 ...

  9. import 和 export

    1.export 命令 export 命令用于规定模块的对外接口. 一个模块就是一个独立的文件.该文件内部所有的变量,外部无法获取.要想外部能够读取模块内部的某个变量,就必须使用 export 关键字 ...

随机推荐

  1. POJ1284 Primitive Roots [欧拉函数，原根]

    题目传送门 Primitive Roots Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5434   Accepted:  ...

  2. [转]SharePoint 2010 Powershell Feature Cmdlets

    In this installment its time to look at the various cmdlets that have to do with Features. Of course ...

  3. python 异步 select pooll epoll

    概念: 首先列一下,sellect.poll.epoll三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当se ...

  4. 企业级SOA之路——在Web Service中使用HTTP和JMS

    原文:http://www.tibco.com/resources/solutions/soa/enterprise_class_soa_wp.pdf   概述     IT业界在早期有一种误解,认为 ...

  5. 我的OI生涯 第七章 终篇

    11.10日. 我们TSOI再次来到了熟悉的燕山大学,只不过这次是真刀真枪的干了. 望着那座熟悉的小桥,身边的好友不知此行过后还有多少. 下午才到,出人意外的是这次没有住燕大宾馆而是选择了熟悉的格林豪 ...

  6. bzoj 2434 ac自动机

    ac自动机中,如果以trie中的节点为节点,(fail[i],i)为边,可以建立一颗树,该树有如下特点:“节点u是节点v的祖先 当且仅当 u代表的字符串是v代表的字符串的一个后缀”.(u代表的字符串是 ...

  7. 设计模式 -- 访问者模式(Visitor)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------主要内容包括: 初识访问者模 ...

  8. python开发_python中的Boolean运算和真假值

    python中的真假值: Truth Value Testing Any object can be tested for truth value, for use in an if or while ...

  9. UESTC 2015dp专题 F 邱老师看电影 概率dp

    邱老师看电影 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/65 Descr ...

  10. 如何解决IIS7上传文件大小限制，.NET 上传文件后 找不到目录解决

    IIS7 默认文件上传大小是30M,那么超过30M的文件就无法上传了,那么就需要对IIS的配置文件进行修改. 在实际应用中往往会出现上传文件太大,无法上传的情况,那是因为IIS对上传文件大小有限制,I ...