ECMAScript 6的转码器

Babel转码器

Babel（http://babeljs.io/）是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境中执行。解决现在环境不支持ES6的问题。

// 转码前
input.map(item => item + 1); 

// 转码后
input.map(function(item) {
     return item + 1;
});

配置文件.babelrc

Babel的配置文件是.babelrc，存放在根目录下，使用Babel的第一步就是配置这个文件。
这个文件是用来设置转码规则和插件的，基本格式如下：

{
  "presets": [],
  "plugins": []
}

presets用于设定转码规则，官方提供以下规则集，可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然后，将这些规则加入.babelrc文件。

{
  "presets": [
    "es2015",
    "react",
    "stage-1"
  ],
  plugins: []
}

注意，以下所有Babel工具和模块的使用，都必须先写好.babelrc文件。

命令行转码

Babel提供babel-cli工具，用于命令行进行转码。它的安装如下：

$ npm install -g babel-cli

基本用法如下：

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file example.es5.js
# 或者
$ babel example.js -o example.es5.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

上面代码是在全局环境下进行Babel转码，这意味着，如果项目要运行，全局环境必须安装Babel，就是说项目对环境产生了依赖，另一方面，这样也无法支持不同项目使用不同版本的Babel。
一个解决方法是在项目中安装local的babel-cli

# 安装
$ npm install --save-dev babel-cli

然后再改写package.json文件

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  }
}

转码时就只要执行下面命令：

$ npm run build

babel-node

babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境，它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。
babel-node是随babel-cli一起安装的，执行babel-node就进入REPL环境：

$ babel-node
> (x => x * 2)(1)
2

babel-node命令还可以直接运行ES6脚本文件。
babel-node也可以安装在项目中，

$ npm install --save-dev babel-cli

然后改写package.json文件：

{
  "scripts": {
    "script-name": "babel-node script.js"
  }
}

上面代码中，使用babel-node替代node，这样script.js本身就不用做任何处理。

babel-register

babel-register模块改写require命令，为它加上一个钩子，这样，此后每当使用require加载 .js、.jsx、.es和 .es6后缀名的文件，就会先用Babel进行转码。
安装：

$ npm install --save-dev babel-register

使用时必须先加载babel-register

require("babel-register");
require("./index.js");

然后，就不需要手动对index.js文件转码了。
注意，babel-register只会对require加载的文件进行转码，不会对当前文件转码，另外，由于它是实时转码，所以只适合在开发环境使用。

babel-core

如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。
安装如下：

$ npm install babel-core --save

然后在项目中就可以调用babel-core。

var babel = require("babel-core");

// 字符串转码
babel.transform('code()', options);

// 文件转码（异步）
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

配置对象options，可以参看官方文档http://babeljs.io/docs/usage/options/

var es6Code = 'let x = n => n + 1';
var es5Code = require('label-core')
  .transform(es6Code, {
  presets: ['es2015']
  })
  .code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'

上面代码中，transform方法的第一个参数是一个字符串，表示需要被转换的ES6代码，第二个参数是转码的配置规则对象。

babel-polyfill

Babel默认只转换新的JavaScript句法（Syntax），而不转换新的API，比如Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
安装如下：

$ npm install --save babel-polyfill

然后，在脚本头部加入如下一行代码：

require("babel-polyfill");

Babel默认不转码的API很多，详细可查看babel-plugin-transform-runtime模块的definitions.js文件。

在线转换

Babel提供了一个在线REPL编译器,可以在线将ES6转码为ES5代码。

Traceur 转码器

Google提供了一款ES6转码器Traceur。

直接插入网页

Traceur允许将ES6代码直接插入网页中，首页，必须在网页头部引入Traceur库文件。如下：

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module">
    import './Greeter.js';
</script>

上面代码中，一共有4个script标签，第一个是加载Traceur的库文件，第二个和第三个是将这个库文件用户浏览器环境，第四个则是加载用户脚本，这个脚本里面可以使用ES6代码。
注意，第四个script标签的type属性的值是module，而不是text/javascript。这是Traceur编译器识别ES6代码的标识，编译器会自动将所有type=module的代码编译为ES5，然后再交给浏览器执行。
同时，可以直接在script type=module之间写ES6代码。
如果想对Traceur的行为进行精确控制，可以采用下面参数配置：

<script>
// Create the System object
winddow.System = new traceur.runtime.BrowserTraceurLoader();
// Set some experimental options
var metadata = {
  traceurOptions: {
    experimental: true,
    properTailCalls: true,
    symbols: true,
    arrayComprehension: true,
    asyncFunctions: true,
    asyncGenerators: exponentiation,
    forOn: true,
    generateorComprehension: true
  }
};
// Load your module
System.import('./myModule.js', {metadata: metadata})
    .catch(function(ex) {
      console.error('Import failed', ex.stack || ex);
    });
</script>

上面代码，首先生成Traceur全局对象window.System，然后System.import方法可以用来加载ES6模块，加载的时候，需要传入一个配置对象metadata，该对象的traceurOptions属性可以配置支持ES6功能。如果设为experimental: true，表示除了ES6外，还支持一些实验性的新功能。

命令行转换

作为命令行工具使用时，Traceur是一个Node的模块，首先需要安装。

$ npm install -g traceur

安装成功后，就可以在命令行下直接使用Traceur了。
Traceur可以直接运行ES6脚本文件，如下:

$ traceur example.js

如果需要保存转码后的ES5文件，则可以用下面命令：

$ traceur --script example.js --out example.es5.js

上面代码–script用于指定输入文件，–out用于指定输出文件。为了防止有些特性编译不成功，最好加上–experimental选项。

$ traceur --script example.js --out example.es5.js --experimental

命令行下转换生成的ES5文件就事情直接在浏览器中运行。

在线转换

Traceur也提供了一个在线编译器，可以直接将ES6转码为ES5。