ES6的转换器

---恢复内容开始---

  ES6代码转为ES5代码的转换器

1.Babel

2.Traceur，Google公司出品

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看：

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

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>

最近在学习es6的一些东西，分享给大家。
转化器的一些说明转载：https://blog.gaoqixhb.com/p/55783789cef7e0a008d5d6ef

---恢复内容结束---