Traceur转码器
Google公司的Traceur转码器,可以将ES6代码转为ES5代码。这意味着,你可以用ES6的方式编写程序,又不用担心浏览器是否支持。
它有多种使用方式。
直接插入网页
Traceur允许将ES6代码直接插入网页。
首先,必须在网页头部加载Traceur库文件。
<!-- 加载Traceur编译器 -->
<script src="http://google.github.io/traceur-compiler/bin/traceur.js"
type="text/javascript"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<!-- 将Traceur编译器用于网页 -->
<script src="http://google.github.io/traceur-compiler/src/bootstrap.js"
type="text/javascript"></script>
接下来,就可以把ES6代码放入上面这些代码的下方。
<script type="module">
class Calc {
constructor(){
console.log('Calc constructor');
}
add(a, b){
return a + b;
}
}
var c = new Calc();
console.log(c.add(4,5));
</script>
正常情况下,上面代码会在控制台打印出9。
注意,script
标签的type
属性的值是module
,而不是text/javascript
。这是Traceur编译器识别ES6代码的标识,编译器会自动将所有type=module
的代码编译为ES5,然后再交给浏览器执行。
如果ES6代码是一个外部文件,也可以用script
标签插入网页。
<script type="module" src="calc.js" ></script>
在线转换
Traceur提供一个在线编译器,可以在线将ES6代码转为ES5代码。转换后的代码,可以直接作为ES5代码插入网页运行。
上面的例子转为ES5代码运行,就是下面这个样子。
<script src="http://google.github.io/traceur-compiler/bin/traceur.js"
type="text/javascript"></script>
<script src="http://google.github.io/traceur-compiler/src/bootstrap.js"
type="text/javascript"></script>
<script>
traceur.options.experimental = true;
</script>
<script>
$traceurRuntime.ModuleStore.getAnonymousModule(function() {
"use strict";
var Calc = function Calc() {
console.log('Calc constructor');
};
($traceurRuntime.createClass)(Calc, {add: function(a, b) {
return a + b;
}}, {});
var c = new Calc();
console.log(c.add(4, 5));
return {};
});
</script>
命令行转换
作为命令行工具使用时,Traceur是一个node.js的模块,首先需要用npm安装。
$ npm install -g traceur
安装成功后,就可以在命令行下使用traceur了。
traceur直接运行es6脚本文件,会在标准输出显示运行结果,以前面的calc.js为例。
$ traceur calc.js
Calc constructor
9
如果要将ES6脚本转为ES5保存,要采用下面的写法
$ traceur --script calc.es6.js --out calc.es5.js
上面代码的--script
选项表示指定输入文件,--out
选项表示指定输出文件。
为了防止有些特性编译不成功,最好加上--experimental
选项。
$ traceur --script calc.es6.js --out calc.es5.js --experimental
命令行下转换的文件,就可以放到浏览器中运行。
Node.js环境的用法
Traceur的Node.js用法如下(假定已安装traceur模块)。
var traceur = require('traceur');
var fs = require('fs');
// 将ES6脚本转为字符串
var contents = fs.readFileSync('es6-file.js').toString();
var result = traceur.compile(contents, {
filename: 'es6-file.js',
sourceMap: true,
// 其他设置
modules: 'commonjs'
});
if (result.error)
throw result.error;
// result对象的js属性就是转换后的ES5代码
fs.writeFileSync('out.js', result.js);
// sourceMap属性对应map文件
fs.writeFileSync('out.js.map', result.sourceMap);
Babel转码器
Babel是另一个广泛使用的ES6转码器,安装命令如下。
$ npm install --global babel
Babel自带一个 babel-node
命令,与Node命令行完全一致,而且可以直接运行ES6代码。
$ babel-node
>
> console.log([1,2,3].map(x => x * x))
[ 1, 4, 9 ]
>
babel-node
命令也可以直接运行ES6脚本。假定将上面的代码放入脚本文件 es6.js 。
$ babel-node es6.js
[1, 4, 9]
babel
命令可以将ES6代码转为ES5代码。
-o
参数将转换后的代码,从标准输出导入文件。
$ babel es6.js -o es5.js