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. USACO 控制公司 Controlling Companies

    友情链接神犇520的博客 题目: 题目描述 有些公司是其他公司的部分拥有者,因为他们获得了其他公司发行的股票的一部分.(此处略去一句废话)据说,如果至少满足了以下三个条件之一,公司A就可以控制公司B了 ...

  2. JSTL-1

    JSTL的配置和使用: * 配置:将jstl.jar和standard.jar拷贝到WEB-INF/lib下 * 使用:要采用一些指令:采用taglib指令 JSTL标准标签库(JSP Standar ...

  3. File Associations

  4. struts2的action编写

    例 HelloWorld.jsp <% @ page contentType = "text/html; charset=UTF-8 " %> <% @ tagl ...

  5. hdu 1058 dp.Humble Numbers

    Humble Numbers Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Subm ...

  6. 51nod1394 差和问题 值域线段树

    水题..... 插入一个值$v$时,对于$[0, v - 1]$和$[v + 1, inf]$的点分别考虑就行了 删除相当于减去插入的贡献 用动态开点线段树卡点常数就过去了 复杂度$O(n \log ...

  7. HDU 6138 Fleet of the Eternal Throne（AC自动机）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6138 [题目大意] 给出一些串,询问第x个串和第y个串的公共子串, 同时要求该公共子串为某个串的前 ...

  8. [转]Android中的android:layout_width和android:width

      android:width 其实是定义控件上面的文本(TextView) 的宽度,当然这个宽度也是和 android:layout_width 配合起来作用的,如果 android:layout_ ...

  9. CDOJ 1048 Bob's vector 三分

    Bob's vector 题目连接: http://acm.uestc.edu.cn/#/problem/show/1048 Description Bob has a vector with mm ...

  10. java开发常用的Linux命令

    原文:https://www.cnblogs.com/not-alone/p/8505925.html 1.查找文件 find / -name filename.txt 根据名称查找/目录下的file ...