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

    下面的命令在项目目录中,安装 Babel。

    1. $ npm install --save-dev @babel/core

    Babel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。

    该文件用来设置转码规则和插件,基本格式如下。

    1. {
    2. "presets": [],
    3. "plugins": []
    4. }

    presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

    1. # 最新转码规则
    2. $ npm install --save-dev @babel/preset-env
    3. # react 转码规则
    4. $ npm install --save-dev @babel/preset-react

    然后,将这些规则加入.babelrc

    1. {
    2. "presets": [
    3. "@babel/env",
    4. ],
    5. "plugins": []
    6. }

    注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc

    命令行转码

    Babel 提供命令行工具@babel/cli,用于命令行转码。

    基本用法如下。

    1. # 转码结果输出到标准输出
    2. $ npx babel example.js
    3. # 转码结果写入一个文件
    4. # --out-file 或 -o 参数指定输出文件
    5. $ npx babel example.js --out-file compiled.js
    6. $ npx babel example.js -o compiled.js
    7. # 整个目录转码
    8. # --out-dir 或 -d 参数指定输出目录
    9. $ npx babel src --out-dir lib
    10. # 或者
    11. $ npx babel src -d lib
    12. # -s 参数生成source map文件

    @babel/node模块的babel-node命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。

    首先,安装这个模块。

    1. $ npm install --save-dev @babel/node

    然后,执行babel-node就进入 REPL 环境。

    1. $ npx babel-node
    2. > (x => x * 2)(1)
    3. 2

    babel-node命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件es6.js,然后直接运行。

    1. # es6.js 的代码
    2. # console.log((x => x * 2)(1));
    3. $ npx babel-node es6.js
    4. 2

    @babel/register 模块

    @babel/register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js.jsx.es和后缀名的文件,就会先用 Babel 进行转码。

    使用时,必须首先加载@babel/register

    1. // index.js
    2. require('@babel/register');
    3. require('./es6.js');

    然后,就不需要手动对index.js转码了。

    1. $ node index.js
    2. 2

    Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如IteratorGeneratorSetMapProxyReflectSymbolPromise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

    举例来说,ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行,可以使用core-jsregenerator-runtime(后者提供generator函数的转码),为当前环境提供一个垫片。

    安装命令如下。

    1. $ npm install --save-dev core-js regenerator-runtime

    然后,在脚本头部,加入如下两行代码。

    1. import 'core-js';
    2. import 'regenerator-runtime/runtime';
    3. // 或者
    4. require('core-js');
    5. require('regenerator-runtime/runtime);

    Babel 默认不转码的 API 非常多,详细清单可以查看babel-plugin-transform-runtime模块的文件。

    浏览器环境

    Babel 也可以用于浏览器环境,使用模块提供的浏览器版本,将其插入网页。

    注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。

    Babel 提供一个REPL 在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。