7.0.0

Edit

使用指南

Babel 工具链中有很多工具可以让你轻松使用 Babel，无论你是“终端用户”还是构建中集成 Babel。本文是快速使用这些工具的指南，你可以在文档的“用法”部分中阅读有关它们的更多信息。

如果你正在使用框架，不同框架配置 Babel 的方式可能会有所不同，实际上有些框架已经为你配置。具体的配置方法请查看交互式设置指南。

概览

本文将向你展示如何将使用 ES2015+ 语法的 JavaScript 代码编译为适用于当前浏览器的代码。这将涉及转换新语法和实现缺失的特性。

整个配置过程包括：

  1. 使用以下命令安装 packages:

    npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

  2. 使用以下内容在项目的根目录中创建名为 babel.config.js 的配置文件：

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

> 上面的浏览器列表只是用于展示的示例。你必须根据想要支持的浏览器进行调整。

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

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

    你可以通过 npm@5.2.0 附带的 npm 包运行器，用 npx babel 替换 ./node_modules/.bin/babel 来缩短该命令。

继续阅读，了解其工作原理的逐步说明以及对所使用的每种工具的介绍。

CLI 的基本用法

你需要的所有 Babel 模块都将作为单独的 npm 包发布，其范围为 @babel（自版本7开始）。这种模块化设计允许每种工具都针对特定用例设计。下面我们来看看 @babel/core 和 @babel/cli。

核心库

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

npm install --save-dev @babel/core

你可以直接在 JavaScript 中 require 它并像下面这样使用它：

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

babel.transform("code", optionsObject);

作为终端用户，你可能希望安装其他工具作为 @babel/core 的接口，并能很好地集成在你的开发过程中。即便如此，你仍可能需要查看其文档页面以了解这些选项，其中大部分选项也可以通过其他工具进行设置。

CLI 工具

@babel/cli 是一个允许你从终端使用 babel 的工具。下面是安装命令和基本用法的示例：

npm install --save-dev @babel/core @babel/cli

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

它使用我们设置的解析方式来解析 src 目录中的所有 JavaScript 文件，并将转换后每个文件输出到 lib 目录。由于我们还没有设置解析方式，这里输出代码将与输入相同（不保留确切的代码样式）。我们可以通过将它们作为选项传入来指定我们想要的解析方式。

我们使用上面的 --out-dir 选项。你可以通过使用 --help 运行它来查看 cli 工具接受的其余选项。但对我们来说最重要的是 --plugins 和 --presets。

Plugins & Presets

代码转换以插件的形式出现，插件是小型 JavaScript 程序，它指示 Babel 如何对代码进行转换。你甚至可以编写自己的插件来应用你想要的任何代码转换。要将ES2015+ 语法转换为 ES5，我们可以依赖官方插件，如 @babel/plugin-transform-arrow-functions：

npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

现在我们代码中的所有箭头函数都将转换为 ES5 兼容函数表达式：

const fn = () => 1;

// converted to

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

这是一个好的开始！如果想要转换代码中还有其他 ES2015+ 功能。我们可以使用 "preset" 来代替预先设定的一组插件，而不是逐一添加我们想要的所有插件。

就像使用 plugins 一样，你也可以创建自己的 preset，分享你需要的任何插件组合。在这个例子中，我们使用了 env preset。

npm install --save-dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

没有任何配置，这个 preset 包括支持现代 JavaScript（ES2015，ES2016 等）的所有插件。但是 presets 也可以选择。我们不从终端传入 cli 和 preset 选项，而是通过另一种传入选项的方式：配置文件。

配置

据你的需要，可以使用几种不同的方法配置文件。请务必阅读有关如何 配置 Babel 的深入指南以获取更多信息。

现在，让我们创建一个名为 babel.config.js 的文件，其中包含以下内容：

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

module.exports = { presets };

现在 env preset 只会为目标浏览器中没有的功能加载转换插件。接下来我们看看 polyfills。

Polyfill

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

这意味着你可以使用像 Promise 或 WeakMap 这样的新内置函数，像 Array.from 或 Object.assign 这样的静态方法，像 Array.prototype.includes 这样的实例方法，以及 generator 函数（提供给你使用 regenerator 插件）。为了做到这一点，polyfill 增加了全局范围以及像 String 这样的原生原型。

对于库/工具的作者来说，太冗余了。如果你不需要像 Array.prototype.includes 这样的实例方法，可以使用 transform runtime 插件而不是污染全局的 @babel/polyfill。

更进一步，如果你确切知道需要实现的功能，可以直接从 core-js 中获取它们。

由于我们正在构建一个应用程序，我们可以只安装 @babel/polyfill:

npm install --save @babel/polyfill

注意 --save 选项而不是 --save-dev，因为这是一个需要在源代码之前运行的 polyfill。

幸运的是，对于我们来说，我们使用的是 env preset，其中有一个 "useBuiltIns" 选项，当设置为 "usage" 时，实际上将应用上面提到的最后一个优化，只包括你需要的 polyfill。使用此新选项，配置更改如下：

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

module.exports = { presets };

Babel 将检查你的所有代码，以查找目标环境中缺少的功能，并仅包含所需的 polyfill。例如这段代码：

Promise.resolve().finally();

会变成这个（因为 Edge 17 没有 Promise.prototype.finally）：

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

Promise.resolve().finally();

如果我们没有将 env preset 的 "useBuiltIns" 选项的设置为 "usage" ，就必须在其他代码之前 require 一次完整的 polyfill。

总结

我们使用 @babel/cli 从终端运行 Babel，@babel/polyfill 来实现所有新的 JavaScript 功能，env preset 只包含我们使用的功能的转换，实现我们的目标浏览器中缺少的功能。

有关使用构建系统，IDE 等设置 Babel 的更多信息，请查看交互式设置指南。

← 什么是 Babel ?配置 Babel →