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 Web开发——JSP基本语法杂记

    在一个JSP页面中,可以包括指令标识.HTML代码.JavaScript代码.嵌入的Java代码.注释和JSP动作标识等内容.但是这些并不是JSP页面所必须的. 1 指令标识指令标识主要用于设定整个J ...

  2. Android之 解析XML文件（1）—— Pull解析

    (以下文章基本照抄<第一行代码>) 解析XML文件有很多方法,这里主要讲Pull解析和SAX解析.这篇文章主要是讲Pull解析. 一.Pull解析参考代码 先上代码: private vo ...

  3. PlayMaker GUI的Normalized

    PlayMaker GUI的Normalized   在PlayMaker的GUI设置中,开发者可以通过Left.Top设置控件元素的起始点位置,通过Width.Height设置控件的大小.考虑到用户 ...

  4. linux下如何配置TCP参数设置详解

    设置tcp参数一定要小心谨慎,轻易不要更改线上环境,我贴一下我们线上环境中,sysctl.conf的内容,见文章底部 net.ipv4.tcp_tw_reuse    = 1  net.ipv4.tc ...

  5. Python中yield和yield from的用法

    yield python中yield的用法很像return,都是提供一个返回值,但是yield和return的最大区别在于,return一旦返回,则代码段执行结束,但是yield在返回值以后,会交出C ...

  6. JZYZOJ1311 邮局设置问题 dp

    易得每两个点之间建立邮局的最好位置为两点最中间的点,两点之间如果没有奇数个数的点则中间两个点都可以...(自己画一下图可以看出随着右边点的增大最佳点的增大非常平滑...强迫症一本满足)   w[i][ ...

  7. 【2-SAT】HDU3622-Bomb Game

    [题目大意] 给n对炸弹可以放置的位置(每个位置为一个二维平面上的点),每次放置炸弹是时只能选择这一对中的其中一个点,每个炸弹爆炸的范围半径都一样,控制爆炸的半径使得所有的爆炸范围都不相交(可以相切) ...

  8. 前后端常用通讯方式-- ajax 、websocket

    一.前后端常用通讯方式 1. ajax  浏览器发起请求,服务器返回数据,服务器不能主动返回数据,要实现实时数据交互只能是ajax轮询(让浏览器隔个几秒就发送一次请求,然后更新客户端显示.这种方式实际 ...

  9. ASIHTTPRequest的环境配置和使用示例

    ASIHTTPRequest类库是基于ISO SDK的一组网络请求的API.IOS SDK的网络组件CFNetwork API操作起来非常复杂.而ASIHTTPRequest类库是对CFNetwork ...

  10. oracle定时任务(dbms_job)

    author:skate time:2007-09-12 http://publish.it168.com/2006/0311/20060311017002.shtml 今天总结下Oracle的任务队 ...