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. crontab定时运行python脚本访问MySQL遇到问题

    最近写了一个python脚本来定时备份MySQL数据库.具体实现如下: 1)python脚本中使用os.system("mysqldump -h127.0.0.1 -uroot -ppass ...

  2. BZOJ4551 HEOI2016树

    可以用并查集,记忆化搜索,线段树多种方法实现. 我这里写的是依照dfs序建线段树,维护区间最大值. #include<bits/stdc++.h> using namespace std; ...

  3. 「ZJOI2009」多米诺骨牌

    「ZJOI2009」多米诺骨牌 题目描述 有一个n × m 的矩形表格,其中有一些位置有障碍.现在要在这个表格内 放一些1 × 2 或者2 × 1 的多米诺骨牌,使得任何两个多米诺骨牌没有重叠部分,任 ...

  4. Codeforces 493 E.Devu and Birthday Celebration

    \(>Codeforces \space 493\ E.Devu\ and\ Birthday\ Celebration<\) 题目大意 : 有 \(q\) 组询问,每次有 \(n\) 小 ...

  5. 【递推】【概率】Gym - 100814A - Arcade Game

    题意:给你一个不超过九位的不含重复数码的十进制数,每次会随机将它的数码打乱,变成一个新的数,如果它小于等于上一次的数,那么你输了:如果它大于上一次的数,那么可以继续.直到它变成能够表达的最大数为止就赢 ...

  6. python3-开发进阶Flask的基础(5)

    内容概要: SQLAlchemy flsak-sqlalchemy flask-script flask-migrate Flask的目录结构 一.SQLAlchemy 1.概述 SQLAlchemy ...

  7. java 环境变量设定

    ​     1   新建系统环境  新建  弹出“新建系统变量”对话框,分别输入变量名“JAVA_HOME”和变量值(java安装路径)“C:\Java\jdk1.7.0_03”,其中变量值是笔者的J ...

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

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

  9. sqlserver -- 学习笔记（二）“SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问”解决方法

    将数据表导出到excel时出现下面错误: SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问,因为此组件已作为此服务器安全配置的一部分而 ...

  10. Educational Codeforces Round 11 C. Hard Process 二分

    C. Hard Process 题目连接: http://www.codeforces.com/contest/660/problem/C Description You are given an a ...