【es6学习】Babel 转码器详解

持续更新

1.6 Babel 转码器

Babel ( babeljs.io／）是个广为使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在浏览器或其他环境执行。这意味着可以用 ES6 的方式编写程序，而不用担心现有环境是否支持。下面是一个例子。

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

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

上面的原始代码用了箭头函数， Babel 将其转为普通函数这样就能在不支持箭头函数的JavaScript 环境中执行了

1.6.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"], "plugins": []
}

需要注意的是，要想使用以下所有 Babel 工具和模块，都必须先写好 .babelrc

1.6.2 命令行转码 babel-cli

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

$ npm install --global babel-cli

基本用法如下。

#转码结采输出到标准输出
$ babel example.js #转码结果写入一个文件
＃一out file 参数指定输出文件
$ babel example . js --out-file compiled.js
#或者
$ babel example.js -o compiled.js #整个目录转码
#--out-dir 或－ 参数指定输出目录
$ babel src --out-dir lib
#或者
$ babel src -d lib #-s 参数生成 source map 文件
$ babel src -d lib -s

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

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

然后，改写 package.json

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

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

$ npm run build

1.6.3 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 命令可以直接运行 S6 脚本。将上面的代码放入脚本文件 es6.js ，然后直接运行。

$ babel-node  es6.js
2

babel-node 也可以安装在项目中。

$ npm install --save-dev babel-cli

然后，改写 package.json

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

在以上代码中，使用 babel-node 替代 node ，这样 script 本身就不用进行任何转码处理了。

1.6.4 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 命令加载的文件进行转码，而不会对当前文件进行转码。另外，由于它是实时转码，所以只适合在开发环境中使用

1.6.5 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);
// => { 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 esSCode =require ( ' babel-core ' )
. transform (es6Code , {
presets: ['latest']
})
. code ;
// ’”use strict ”; \ n \nvar x = function x (n) { \ n return n + 1 ; \n } ;’

1.6.6 babel-polyfill

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

$ npm install --save babel-polyfill

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

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

Babel 默认不转码的 API 非常多，详细清单可以查看 babel -plugin-t ransform-runtime 模块的 definitions.js ( github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js ）文件。

1.6.7 浏览器环境

Babe 也可以用于浏览器环境。但是，从 Bable 6.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 [ babelify --presets [ latest ] ]

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

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

1.6.8 在线转换

Babel 提供 REPL 在线编译器（ babeljs.io/repl )，可以在线将 S6 代码转为ES5 代码。转换后的代码可以直接作为 S5 代码插网页井运行。

1.6.9 与其他工具的配合

许多工具需要 Babel 进行前置转码，此处举两个例子： ESLint和 Mocha。
ESLint 用于静态检查代码的语法和风格，安装命令下。

$ npm install --save-dev eslint babel-eslint

然后，在项目根目录下新建一个配置文件 .eslintrc 在其中加入 parser 字段。

{"parser" : " babel-eslint", "rules" :{ ...}
}

再在 package.json 口中加入相应的 scripts脚本

{"name":"my-module", "scripts" :{ "lint":"eslint my-files.js" } , "devDependencies" :{ "babel-eslint":" …","eslint":"..."}
}

Mocha 则是一个测试框架，如果需要执行使用 ES6 语法的测试脚本，可 package.json的 scripts.test 修改如下。

"scripts" :{ "test":"mocha --ui qunit --compilers js:babel-core/register "
}

在上面的命令中， --compilers 参数指定脚本的转码器规定后缀为js的文件都要使用babel-core/register 先进行转码。

声明：本文来自《ES6 标准入门／阮一峰著 -3 版．一北京：电子工业出版社， 2017.9》ISBN 978-7-121-32475-8，如有侵权，请联系删除。