Babel 使用指南

Babel 工具链是由大量的工具组成的，无论你是 “最终用户” 还是在集成 Babel，这些工具都简化了 Babel 的使用。本文是对这些工具的使用方法的快速介绍，你可以在文档的 “用法” 章节了解到更多信息。

如果你正在使用的是一套框架，Babel 的配置可能会有所不同，也可能已经自动为你配置好了。

概览​

本指南将想你展示如何将 ES2015+ 语法的 JavaScript 代码编译为能在当前浏览器上工作的代码。这将涉及到新语法的转换和缺失特性的修补。

整个配置过程包括：

1. 运行以下命令安装所需的包（package）：

   //npm命令
   npm install --save-dev @babel/core @babel/cli @babel/preset-env
   
   //Yarn命令
   yarn add --dev @babel/core @babel/cli @babel/preset-env
   
   //pnpm命令
   pnpm add --save-dev @babel/core @babel/cli @babel/preset-env

2. 在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本），并将以下内容复制到此文件中：
   babel.config.json

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": {
             "edge": "17",
             "firefox": "60",
             "chrome": "67",
             "safari": "11.1"
           },
           "useBuiltIns": "usage",
           "corejs": "3.6.5"
         }
       ]
     ]
   }
   

   上述浏览器列表仅用于示例。请根据你所需要支持的浏览器进行调整。参见 此处 以了解 @babel/preset-env 可接受哪些参数。
   

   如果你使用的是 Babel 的旧版本，则文件名为 babel.config.js。
   babel.config.js

   const presets = [
     [
       "@babel/preset-env",
       {
         targets: {
           edge: "17",
           firefox: "60",
           chrome: "67",
           safari: "11.1",
         },
         useBuiltIns: "usage",
         corejs: "3.6.4",
       },
     ],
   ];
   
   module.exports = { presets };

3. 运行此命令将 src 目录下的所有代码编译到 lib 目录：
   Shell

   ./node_modules/.bin/babel src --out-dir lib
   

 你可以利用 npm@5.2.0 所自带的 npm 包运行器将 ./node_modules/.bin/babel 命令缩短为 npx babel

继续阅读后面的分步讲解，了解其工作原理以及每个工具的功能。

Babel 的核心功能包含在 @babel/core 模块中。通过以下命令安装：

//npm命令
npm install --save-dev @babel/core

//Yarn命令
yarn add --dev @babel/core

//pnpm命令
pnpm add --save-dev @babel/core

JavaScript

const babel = require("@babel/core");

babel.transformSync("code", optionsObject);

作为一名最终用户，你可以还需要安装其他工具作为 @babel/core 的使用接口并很好地集成到你的开发流程中。即便如此，你仍然需要查看其文档并了解可用的参数，其中很多参数也可以通过其他工具进行设置。

CLI 命令行工具​

@babel/cli 是一个能够从终端（命令行）使用的工具。下面是其安装命令和基本用法：

//npm命令
npm install --save-dev @babel/core @babel/cli
./node_modules/.bin/babel src --out-dir lib

//Yarn命令
yarn add --dev @babel/core @babel/cli
./node_modules/.bin/babel src --out-dir lib
//pnpm命令
pnpm add --save-dev @babel/core @babel/cli
./node_modules/.bin/babel src --out-dir lib

插件和预设（preset）

//npm命令
npm install --save-dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

//Yarn命令
yarn add --dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
//pnpm命令
pnpm add --save-dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

JavaScript

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

//npm命令
npm install --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

//Yarn命令
yarn add --dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
//pnpm命令
pnpm add --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

如果不进行任何配置，上述 preset 所包含的插件将支持所有最新的 JavaScript （ES2015、ES2016 等）特性。但是 preset 也是支持参数的。我们来看看另一种传递参数的方法：配置文件，而不是通过终端控制台同时传递 cli 和 preset 的参数。

配置

根据你的需要，可以通过几种不同的方式来使用配置文件。另外，请务必阅读我们关于如何 配置 Babel 的深入指南以了解更多信息。

现在，我们首先创建一个名为 babel.config.json 的文件（需要 v7.8.0 或更高版本），并包含如下内容：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        }
      }
    ]
  ]
}

 从 Babel 7.4.0 版本开始，这个软件包已经不建议使用了，建议直接包含 core-js/stable （用于模拟 ECMAScript 的功能）:

JavaScript

import "core-js/stable";

如果您正在将生成器或异步函数编译到ES5，并且您使用的是7.18.0之前的​@babel/core​或​@babel/plugin-transformat-regenerator​版本，则还必须加载 regenerator runtime 包。当使用​@babel/preset-env的useBuiltIns:“usage”​选项或@babel/plugin-transform-runtime，它会自动加载。

@babel/polyfill 模块包含 core-js 和一个自定义的 regenerator runtime 来模拟完整的 ES2015+ 环境。

这意味着你可以使用诸如 Promise 和 WeakMap 之类的新的内置组件、 Array.from 或 Object.assign 之类的静态方法、 Array.prototype.includes 之类的实例方法以及生成器函数（generator functions）（前提是你使用了 regenerator 插件）。为了添加这些功能，polyfill 将添加到全局范围（global scope）和类似 String 这样的原生原型（native prototypes）中。

对于软件库/工具的作者来说，这可能太多了。如果你不需要类似 Array.prototype.includes 的实例方法，可以使用 transform runtime 插件而不是对全局范围（global scope）造成污染的 @babel/polyfill。

更进一步，如果你确切地指导你所需要的 polyfills 功能，你可以直接从 core-js 获取它们。

由于我们构建的是一个应用程序，因此我们只需安装 @babel/polyfill 即可：

//npm 命令 
npm install --save @babel/polyfill

//Yarn命令 
yarn add @babel/polyfill
//pnpm命令
pnpm add @babel/polyfill

 注意，使用 --save 参数而不是 --save-dev，因为这是一个需要在你的源码之前运行的 polyfill。

幸运的是，我们所使用的 env preset 提供了一个 "useBuiltIns" 参数，当此参数设置为 "usage" 时，就会加载上面所提到的最后一个优化措施，也就是只包含你所需要的 polyfill。使用此新参数后，修改配置如下：

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

Babel 将检查你的所有代码，以便查找目标环境中缺失的功能，然后只把必须的 polyfill 包含进来。示例代码如下：

JavaScript

Promise.resolve().finally();

将被转换为（由于 Edge 17 没有 Promise.prototype.finally）：

JavaScript

require("core-js/modules/es.promise.finally");

Promise.resolve().finally();

如果我们不使用将 "useBuiltIns" 参数设置为 "usage" （默认值是 "false"）的 env 预设的话，那么我们必须在所有代码之前利用 require 加载 一次 完整的 polyfill。

例如：

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "entry"
      }
    ]
  ]
}

然后首先导入 core-js（到polyfill ECMAScript功能），在我们的入口文件中模拟完整的ES2015+环境，因为@pabel/polyfill已经被弃用：

JavaScript

 import "core-js/stable";

总结

我们使用 @babel/cli 从终端运行 Babel，利用 @babel/polyfill 来模拟所有新的 JavaScript 功能，而 env preset 只对我们所使用的并且目标浏览器中缺失的功能进行代码转换和加载 polyfill。