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. springMVC项目,存中文到mysql是乱码(?????)

    问题:jdbc连接mysql数据库,web页面输入的中文,存到数据库却变成"????”: 但是数据库中的中文却能够正常读出并在页面显示 mysql中运行 :SHOW VARIABLES LI ...

  2. centos7 更改时区

    Linux 系统(我特指发行版, 没说内核) 下大部分软件的风格就是不会仔细去考虑向后 的兼容性, 比如你上个版本能用这种程序配置, 没准到了下一个版本, 该程序已经不见了. 比如 sysvinit ...

  3. java8新特性——并行流与顺序流

    在我们开发过程中,我们都知道想要提高程序效率,我们可以启用多线程去并行处理,而java8中对数据处理也提供了它得并行方法,今天就来简单学习一下java8中得并行流与顺序流. 并行流就是把一个内容分成多 ...

  4. java高并发程序设计模式-并发级别:阻塞、无障碍、无锁、无等待【转载】

    一般认为并发可以分为阻塞与非阻塞,对于非阻塞可以进一步细分为无障碍.无锁.无等待,下面就对这几个并发级别,作一些简单的介绍. 1.阻塞 阻塞是指一个线程进入临界区后,其它线程就必须在临界区外等待,待进 ...

  5. 74.Interesting Sequence(有趣的数列)(拓扑排序)

    Interesting Sequence(有趣的数列)[Special judge] 题目概述:是否存在一个长度为n的整数数列,其任意连续p项之和为正数而任意连续q项之和为负数? 方法:连续项a[i] ...

  6. mybatis源码分析(4)----org.apache.ibatis.binding包

    1.  我们通过接口操作数据库时,发现相关的操作都是在org.apache.ibatis.binding下 从sqSessin 获取getMapper() SqlSession session = s ...

  7. Java--tomcat线程池(分析)

    以apache-tomcat-7.0.57 为例子 tomcat的默认配置如下: <Connector connectionTimeout="/> 默认的线程池为: maxThr ...

  8. [置顶] getopt_long函数基本用法-linux

    一.感性认识: [c-sharp]  view plain copy   #include <stdio.h> #include <getopt.h> char * l_opt ...

  9. EntityFramework中几种操作小结

    目前项目中使用到的EntityFramework中几种操作小结,先标记下.没有详细介绍,后续有空的话再补充一些并完善一下. 列中加入RowVersion时间戳 public class Product ...

  10. openCV+ASM+LBP+Gabor实现人脸识别(GT人脸库)

    原理:使用GT人脸库做样本,VS2010下使用openCV2.44自带的Haar算法检測人脸区域,ASM Library特征检測,然后使用YCrCb颜色空间做肤色检測,再用LBP+Gabor小波提取特 ...