本文详细介绍Babel作为ES6转码器的核心用法。涵盖.babelrc配置文件设置、babel-cli命令行工具的全局与本地安装、babel-node REPL环境及脚本执行、babel-register实时转码机制。此外，还解析了babel-core API调用、babel-polyfill垫片方案，以及如何在浏览器环境和构建工具（如Browserify）中集成Babel，并介绍了与ESLint、Mocha等工具的配合使用方法。
Babel概述与配置
Babel是一款广泛使用的代码转码工具，主要功能是将ES6语法转换为ES5，从而确保代码能在当前不支持ES6的运行环境中正常执行。
这使得开发者可以提前使用ES6语法进行编程，无需顾虑目标运行环境的兼容性。具体示例如下。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
上述原始代码中使用了箭头函数，该特性尚未得到广泛支持。Babel会将其转换为普通函数形式，从而实现在现有JavaScript环境中的运行。
一、配置文件.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-2"
],
"plugins": []
}
需注意，后续所有Babel工具及模块的使用，均须预先配置好.babelrc。
命令行转码工具
二、命令行转码babel-cli
Babel提供了babel-cli工具，用于支持命令行方式的代码转码。
其安装命令如下所示。
$ npm install --global babel-cli基本用法示例如下。
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ 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-cli接着，修改package.json文件。
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}
执行转码时，运行以下命令即可。
$ npm run buildREPL环境与脚本执行
三、babel-node
babel-cli工具内置了一个babel-node命令，提供了一个支持ES6的REPL（交互式解释器）环境。它具备Node.js REPL的所有功能，并能直接运行ES6代码。
该工具无需单独安装，而是随babel-cli一同安装。执行babel-node即可进入REPL环境。
$ babel-node
> (x => x * 2)(1)
2babel-node命令可直接运行ES6脚本。将前述代码保存至脚本文件es6.js中，然后直接运行即可。
$ babel-node es6.js
2babel-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命令加载的文件进行转码，而不处理当前文件。此外，由于其实时转码的特性，该模块仅适用于开发环境。
API调用与垫片方案
五、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的具体参数可参考官方文档http://babeljs.io/docs/usage/options/。
以下是一个使用示例。
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-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）均不会被转码。
例如，ES6在Array对象上新增了Array.from方法，Babel不会对此方法进行转码。若需使该方法运行，必须使用babel-polyfill，为当前环境提供垫片支持。
安装命令如下。
$ npm install --save babel-polyfill
随后，在脚本头部加入以下代码行。
import 'babel-polyfill';
// 或者
require('babel-polyfill');
Babel默认不转码的API数量众多，详细清单可查看babel-plugin-transform-runtime模块中的definitions.js文件。
浏览器环境部署
七、浏览器环境
Babel也可用于浏览器环境。但从Babel 6.0版本开始，不再直接提供浏览器版本，而是需通过构建工具生成。若不使用或不想使用构建工具，可通过安装5.x版本的babel-core模块获取。
$ npm install babel-core@old执行上述命令后，可在当前目录的node_modules/babel-core/子目录中找到babel的浏览器版本browser.js（未精简）和browser.min.js（已精简）。
随后，将以下代码插入网页中。
<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>上述代码中，browser.js是Babel提供的转换器脚本，可在浏览器中运行。用户的ES6脚本置于script标签内，但需注明type="text/babel"。
另一种方法是使用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-es2015随后，通过命令行转换ES6脚本。
$ browserify script.js -o bundle.js \
-t [ babelify --presets [ es2015 react ] ]上述命令将ES6脚本script.js转换为bundle.js，浏览器直接加载后者即可。
在package.json中设置以下代码，即可避免每次命令行输入参数。
{
"browserify": {
"transform": [["babelify", { "presets": ["es2015"] }]]
}
}在线转换与工具集成
八、在线转换
Babel提供了一个REPL在线编译器，可在线将ES6代码转换为ES5代码。转换后的代码可直接作为ES5代码插入网页运行。
九、与其他工具的配合
许多工具需要Babel进行前置转码，此处列举两个例子：ESLint和Mocha。
ESLint用于静态检查代码的语法和风格，安装命令如下。
$ npm install --save-dev eslint babel-eslint
随后，在项目根目录下新建配置文件.eslint，并在其中加入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先进行转码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。