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

利用转码器让ES6在浏览器运行