使用指南

Bael 工具链有很多工具可以轻松的使用 Babel,如果是在框架中，可能框架已经使用并处理了 Babel

概述

本指南将向您展示如何将使用 ES2015+ 语法的 JavaScript 应用程序代码编译为适用于当前浏览器的代码。这将涉及转换新语法和填充缺失功能。

下面展示使用 ES2015 的代码编译为当前浏览器环境的代码演示

• 1.安装 packages

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

• 2.创建名为babel.config.json的配置文件

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

如果是babel v7.8.0以下的版本，请使用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 };

• 运行如下命令 将 src 目录中的代码编译为 lib

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

如果是npm@5.2.0以上的版本，可以使用 npx babel 进行编译

npx babel src --out-dir lib

核心库

您需要的所有 Babel 模块都作为单独的 npm 包发布，范围为 （ @babel 从版本 7 开始）。这种模块化设计允许使用各种工具，每种工具都是针对特定用例设计的。在这里，我们将看看 @babel/core 和 @babel/cli .

Babel core

Babel 的核心功能位于 @babel/core 模块中。安装后：

npm install --save-dev @babel/core

你可以 require 直接在 JavaScript 程序中使用它，并像这样使用它：

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

babel.transformSync("code", optionsObject);

Babel CLI

@babel/CLI 是一个工具，允许您从终端使用 babel,下面是它的安装方式

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

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

• 使用 plugin

使用下面的指令可以利用@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

• 使用 presets

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

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

Polyfill

从 Babel 7.4.0 开始，Polyfill已经被弃用，取而代之的是直接包含 core-js/stable （polyfill ECMAScript 特性）

import "core-js/stable";

如果要将生成器或异步函数编译为 ES5，并且使用的是 或 @babel/plugin-transform-regenerator 低于 7.18.0 的版本 @babel/core ，则还必须加载 regenerator runtime 包。使用 @babel/preset-env 的选项或 @babel/plugin-transform-runtime 时 useBuiltIns: "usage" 会自动加载它。

@babel/polyfill 模块包括 core-js 和自定义再生器运行时，以模拟完整的 ES2015+ 环境。

这意味着您可以使用新的内置函数，如 Promise or 、静态方法（如 or WeakMap ）、实例方法（如 和 Object.assign 生成器函数）和生成器函数（ Array.prototype.includes Array.from 与再生器插件一起使用时）。polyfill 增加了全局范围以及本机原型，例如 String 为了做到这一点。

对于库/工具作者来说，这可能太多了。如果您不需要实例方法 Array.prototype.includes ，则可以通过使用转换运行时插件而不是 @babel/polyfill .

更进一步，如果你确切地知道你需要 polyfill 来做什么，你可以直接从 core-js 中要求它们。

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

npm install --save @babel/polyfill

现在对我们来说幸运的是，我们正在使用预设，该 env "useBuiltIns" 预设有一个选项，当设置为 "usage" 时，实际上将应用上面提到的最后一个优化，其中您只包含所需的填充物。使用此新选项，配置更改如下所示：

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

使用usage配置,Babel 现在将检查您的所有代码中的目标环境中缺少的功能，并且仅包含所需的 polyfill。例如，此代码:

Promise.resolve().finally();

会变成这样（因为Edge浏览器17版本 没有 Promise.prototype.finally ）：

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

Promise.resolve().finally();

如果我们不使用将 "useBuiltIns" 选项设置为 "usage" （默认为“false”）的 env 预设，则在任何其他代码之前，我们只需要在入口点中要求完整的 polyfill 一次。例如：

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

然后首先在我们的入口文件中导入 core-js（以 polyfill ECMAScript 特性）来模拟完整的 ES2015+ 环境，因为 @babel/polyfill 已被弃用：

 import "core-js/stable";