【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，如有侵权，请联系删除。