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"]}]]}}
傷城~
落日映苍穹つ
分手后的思念是犯贱
还没有评论，来说两句吧...