[ES6] 02. Traceur compiler and Grunt
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的更多相关文章
- [ES6] 01. Intro to ES6 and traceur compiler
---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScri ...
- WebStorm中使用ES6的几种方式
本篇总结几种在WebStorm下使用ES6的方式. 首先要选择Javascript的版本.依次点击"File","Settings","Languag ...
- es6 import 与 export
1.export 命令 export 命令用于规定模块的对外接口. 一个模块就是一个独立的文件.该文件内部所有的变量,外部无法获取.要想外部能够读取模块内部的某个变量,就必须使用 export 关键字 ...
- JavaScript资源大全中文版（Awesome最新版）
Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...
- JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）
JavaScript资源大全中文版(Awesome最新版) 目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...
- JavaScript资源大全
目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 模板引擎 数据可视化 编辑器 UI 输入 日历 选择 文件上 ...
- Awesome Javascript(中文翻译版)
[导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架 ...
- Gulp思维——Gulp高级技巧
本文翻译自Getting gulpy -- Advanced tips for using gulp.js 感受过gulp.js带来的兴奋过后,你需要的不仅仅是它的光鲜,而是切切实实的实例.这篇文章讨 ...
- import 和 export
1.export 命令 export 命令用于规定模块的对外接口. 一个模块就是一个独立的文件.该文件内部所有的变量,外部无法获取.要想外部能够读取模块内部的某个变量,就必须使用 export 关键字 ...
随机推荐
- Python并发编程-守护进程
守护进程 子进程转换为守护进程 主进程的代码结束,子进程的代码也应该接收, 这个事情有守护进程来做 守护进程会随着主进程的代码执行完毕而结束, 而不是随着主进程的接收而结束(子进程不一定结束) fro ...
- shell 从变量中切割字符串
1. 在shell变量中切割字符串 shell中截取字符串的方法有很多中,${expression}一共有9种使用方法.${parameter:-word}${parameter:=word}${pa ...
- 初拾Java（问题二：缺类异常，无法编译）
昨天,在看JSP页面包含的元素(JSP指令,生命,表达式,动作等)时,拷贝了一个别人的例子来在Myeclipse里运行,结果出现了如下的缺类错误: 多调试两次也会出现如下无法编译的错误: 具体代码如下 ...
- React Native 系列(二)
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- aiohttp
发起请求 async def fetch(): async with aiohttp.ClientSession() as session: async with session.get('https ...
- Spring Mvc 前台数据的获取、SpringMvc 表单数据的获取
首先在web.xml 里面配置一个编码过滤器 <!-- springmvc框架本身没有处理请求编码,我们自己配置一个请求编码过滤器 --> <filter> <filte ...
- IndiaHacks 2016 - Online Edition (Div. 1 + Div. 2) E. Bear and Forgotten Tree 2 bfs set 反图的生成树
E. Bear and Forgotten Tree 2 题目连接: http://www.codeforces.com/contest/653/problem/E Description A tre ...
- CentOS下的yum upgrade和yum update区别，没事别乱用，和Ubuntu的update不一样！
说明:生产环境对软件版本和内核版本要求非常精确,别没事有事随便的进行yum update操作!!!!!!!!! yum update:升级所有包同时也升级软件和系统内核 yum upgrade:只升级 ...
- hdu4337 King Arthur's Knights
King Arthur's Knights Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- [HTML]不让TD中的文本撑开表格(转)
我经常会遇到这样的问题:在设计好宽度的表格中,因为有些文本信息过长,而把表格撑开(弄的面目全非)!很让人头疼.其实解决这个问题很简单,只要在<td>的样式中加入word-break: br ...