在 Babel 工具链中有很多工具可以让您轻松使用 Babel，无论您是“最终”还是构建Babel本身的集成。

这将是对这些工具的介绍，您可以在文档的“使用”部分阅读更多关于它们的信息。

如果您使用的是框架，那么配置Babel的工作可能不同，或者实际上已经为您处理过了。请查看我们的Babel安装指南。

Babel 概述

本指南将向您展示如何将使用ES2015+语法的JavaScript应用程序编译成在当前浏览器中工作的。这将转换新语法和多填充缺少的特性。

1、运行以下命令安装软件包：

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

2、创建名为Babel.con.json在您项目的根上，此如下：

{
  "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 package runner 将 ./node_modules/.bin/babel 替换为 npx babel 来缩短该命令。

请继续阅读，逐步了解其工作原理，并介绍所使用的每个工具。

CLI 基本使用

您需要的所有Babel模块都作为单独的 npm 包发布在 @Babel 下（从第7版开始）。

这个模块化的设计允许使用各种工具，每个工具都是为特定的用例设计的。我们将看到 @babel/core 和 @babel/cli 。

核心库

Babel的核心位于@Babel/core模块中。

安装后：

npm install --save-dev @babel/core

您可以直接在JavaScript程序中使用它，如下所示：

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工具，可以查看该工具接受的其余选项。但现在对我们来说最重要的是——和——预设。

和预设

转换以的形式出现，是一些小的JavaScript程序，指导Babel如何对执行转换。您甚至可以编写自己的来将任何您想要的转换应用到您的中。要将ES2015+语法转换为ES5，我们可以依赖官方，如@babel/plugin transform arrow：

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+，我们希望进行转换。我们不需要接地我们想要的所有，我们可以使用“预设”，它只是一组预先确定的。

就像使用一样，您也可以创建自己的预设来共享所需的任何组合。对于我们这里的用例，有很好的预置名为env。

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

在没有任何配置的情况下，这个预设将所有现代JavaScript的（ES2015、ES2016等）。但预设也可以选择。与其从终端同时传递cli和预设选项，不如看看传递选项的另一种方式：。

配置

根据您的需要，有几种不同的可以使用。请务必阅读我们关于如何配置Babel的深入指南以了解更多信息。

现在，让我们创建名为babel.con.json的，其中包含以下：

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

module.exports = { presets };

现在env预置将只为目标浏览器中不可用的特性加载转换。我们都准备好了语法。接下来让我们看看polyfills。

Polyfill

从Babel 7.4.0开始，这个包已经被弃用，因为它直接包含了核心js/stable（polyfill ECMAScript特性）和再生器运行时/运行时（需要使用transpiled器）：

import "core-js/stable";
import "regenerator-runtime/runtime";

@babel/polyfill模块核心js和定制的再生器运行时，以模拟完整的ES2015+环境。

这意味着您可以使用新的内置，如Promise或WeakMap、静态（如Array.from或Object.assign）、实例（如Array.prototype.includes）和器（与再生器一起使用时）。polyfill将到全局范围以及本机原型（如String）中，以便执行此操作。

对于库/工具作者来说，这可能太多了。如果不需要Array.prototype.includes这样的实例，则可以使用transform运行时而不是@babel/polyfill来实现，而不会完全污染全局范围。

更进一步，如果您确切地知道需要polyfill的，可以直接从core js中获得它们。

既然我们正在构建应用程序，我们就可以安装@babel/polyfill：

npm install --save @babel/polyfill

注释：备份选项Instead of----save-dev as this is a polyfill that needs to run before your source code.

现在幸运的是，我们使用的是env预设，它有“useBuiltIns”选项，当设置为“usage”时，实际上将应用上面提到的最后优化，其中您只所需的polyfill。使用此新选项时，配置将更改如下：

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

Babel现在将检查您的所有，查找目标环境中缺少的，并且只所需的polyfill。

例如，此：

Promise.resolve().finally();

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

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

如果我们不使用env预设，并且将“ useBuiltIns”选项设置为“ usage”，则在所有其他之前，我们只需要在入口点一次完整填充即可。

我们使用@babel/cli 从终端运行Babel，使用@babel/polyfill来填充所有新的JavaScript，并且使用env预设仅包含我们使用的以及目标浏览器中缺少的转换和polyfill 。

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