本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2020-06-10
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
{
"presets": [
"@babel/env", // 最新转码规则
"@babel/preset-react" // react 转码规则
],
"plugins": []
}
// presets字段设定转码规则
Babel 提供命令行工具@babel/cli，用于命令行转码。
安装：npm install @babel/cli -g
使用
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件 --out-file 或 -o 参数指定输出文件
$ babel example.js -o compiled.js
# 整个目录转码 --out-dir 或 -d 参数指定输出目录
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
babel-cli工具自带一个babel-node命令，提供一个ES6的REPL环境。
REPL(Read Eval Print Loop) 交互式解释器，表示一个电脑的环境，类似 Window 系统的终端或 Unix/Linux shell，我们可以在终端中输入命令，并接收系统的响应。
# 执行 babel-node 进入REPL环境
$ babel-node
# 输入
> (x => x * 2)(1)
# 输出
2
// package.json
{
"scripts": {
"script-name": "babel-node main.js"
}
}
可以安装到项目中npm i babel-node -D，使用babel-node替代node。
这里可以使用npx，没有安装到全局的话，如果想跑这个脚本，就必须配置在package.json的scripts字段里面，然后npm run script-name，npx就是用来解决这个问题的，不用配置package.json，直接在命令行使用npx babel-node main.js，一般Node自带npm模块，可以直接使用npx命令，如果不能用就需要手动安装一下npm i npx -g
@babel/register模块改写require命令，为它加上一个钩子，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。
安装：npm i @babel/register -D
使用：
// index.js
require('@babel/register');
require('./es6.js');
@babel/register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
如果某些代码需要调用 Babel 的 API 进行转码，就要使用@babel/core模块。
安装： npm i babel-core -D
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 }
const sourceCode = "if (true) return;";
const parsedAst = babel.parse(sourceCode, { parserOpts: { allowReturnOutsideFunction: true } });
babel.transformFromAst(parsedAst, sourceCode, options, function(err, result) {
const { code, map, ast } = result;
});
Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign、新增的Array.from方法）都不会转码。如果想让这些方法运行，必须为当前环境提供一个垫片。
安装：npm i core-js regenerator-runtime -D
使用：
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime);
Babel 默认不转码的 API 非常多，详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。