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. java console 到文件

    System.setOut(new PrintStream(new FileOutputStream("c:\\temp\\test1.txt"))); System.out.pr ...

  2. 管理lvm 卷 system-storage-manager

    安装 sudo yum install system-storage-manager [root@si-test-blueking--4 ~]# ssm list 创建物理磁盘到物理卷,<poo ...

  3. [NOI2011]阿狸的打字机 --- AC自动机 + 树状数组

    [NOI2011] 阿狸的打字机 题目描述: 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机. 打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母.经阿狸研究发现, ...

  4. HOJ 2645 WNim sg函数 博弈论

    http://blog.csdn.net/y1196645376/article/details/52165245 这道题我没有写,因为我就算翻译了我也找不到数据范围,也分不清数据变量的命名,而且ho ...

  5. 1.7（SQL学习笔记）游标

    一.游标简介 SELECT语句得到的是一个结果集,有时我们需要对结果集中的单条数据进行处理. 这时就需要使用游标,游标定义时和一个SELECT语句的结果集关联在一起. 游标执行这个结果集,可以在结果集 ...

  6. servlet3.0 @WebServlet注解无效的情况

    web.xml文件中的metadata-comcomplete属性的作用: 该属性指定当前的部署描述文件是否是完全的.如果设置为true,则容器在部署时只依赖部署描述文件,忽略所有的注解(同时也会跳过 ...

  7. SHELL异常处理(转载)

    写SHELL好久了,经常被异常困扰,可竟然坚持了若干年没用过,回想以前服务过的公司,阿弥陀佛,罪过罪过.废话少说,希望此篇文章可以协助大家和我彻底结束SHELL脚本就是LINUX命令集合的初级阶段. ...

  8. [转]如何解决android模拟器慢的问题

    分步阅读 在android开发的过程,发现android模拟器的速度不是一般的慢,那主要是因为android模拟器默认采用的是arm处理器造成的,这里主要提供两种方法: ① 利用intel虚拟硬件加速 ...

  9. [转]如何卸载eclipse中的ADT

      卸载ADT的方法,方法如下:1.选择Help>Install New Software:2.在"Details" 面板中, 点击"What is already ...

  10. Dart格式化输出

    类似于保留几位小数,直接 n.toStringAsFixed() 例如: 1.toStringAsFixed(3); // 1.000 (4321.12345678).toStringAsFixed( ...