Babel转码器（ES6）

一、Babel介绍

Babel(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字段设定转码规则，官方提供以下的规则集，可以根据需要进行安装。

    # 最新转码规则
    $ npm install --save-dev babel-preset-latest
    
    # react 最新转码规则
    $ npm install --save-dev babel-preset-react
    
    # 不同阶段语提案的转码规则 （共有四个阶段）， 选装一个、
    $ 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":[
            "latest",
            "react",
            "stage-2"
    ],
        "plugings":[]
    }

注意：要想使用后面的所有babel工具和模块，都必须先写好.babelrc配置文件。

三、命令行转码babelrc-cli

Babel提供babel-cli工具，用于命令行转码
如下图：

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

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

然后，改写package.json

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

转码的时候需要执行以下命令

$ npm run bulid

四、babel-node

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

在以上代码中，使用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);
//=>{code,map,ast}

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


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

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

关于配置对象options的内容，可以参看官方文档，地址是babeljs.io/docs/usage/options/。

看以下示例。transform方法的第一个参数是一个字符串，表示需要被转换的ES6代码，第二个参数是转换的配置对象。

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

七、babel-polyfill

babel默认只转新的JavaScript句法（syntax）,而不是转新的API,如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及定义在全局对象上的方法（如Project.assign）都不会转码。
举例来说，ES6在Array对象上新增了Array.from方法，Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill为当前环境提供一个垫片。
安装命令如下：

$ npm install --save babel-polyfill

然后，在脚本头部加入如下代码。

import 'babel-polyfill';
//或者
require('babel-polyfill');

七、浏览器环境

Babel也可用于浏览器环境。但是，从Babel6.0开始就不再直接提供浏览器版本而是要用构建环境构建出来。如果没有或不想使用构建工具，可以使用babel-standalone(github.com/Daniel15/babel-standalone)模块提供的浏览器版本，将其插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js">
</script>
<script type="text/babel">
//Your ES6 code
</script>

注意：网页实时将ES6代码转为ES5代码，对性能将会产生影响。生产环境下需要加载已转码的脚本。
以下命令将代码打包成浏览器可以使用的脚本，以Babel配合Browserify为例。首先，安装babelify模块：

$ npm install --save-dev babelify babel-preset-latest

然后，再用命令行转换ES6脚本：

$ browserify script.js -o bundle.js \-t [babellify --presets[latest]]

以上代码将ES6脚本script.js转为bundle.js,浏览器直接加载后即可。
在package.json中添加下面的代码，则不必每次输入参数。

{
  “browserify”:{
       "transform":[["babelify",{"presets":["latest"]}]]
   }
}