如何配置 Babel，实现按需加载 Polyfill

在开发前端项目时，我们常常需要使用最新的 ECMAScript 语法和 API，但是这些新特性不一定被所有浏览器所支持。为了解决这个问题，我们需要使用 Babel 来将最新的语法转换成浏览器可识别的代码，并且使用 Polyfill 来填充浏览器缺失的 API。

在本文中，我们将介绍如何配置 Babel，并且实现按需加载 Polyfill。

安装 Babel

首先，我们需要安装 Babel。我们可以使用 npm 来进行安装：

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

上面的命令会安装 Babel 的核心模块 @babel/core、命令行工具 @babel/cli，以及预设模块 @babel/preset-env。

配置 Babel

在安装完 Babel 后，我们需要配置它。我们可以在项目根目录下创建一个名为 .babelrc 的文件来进行配置。

下面是一个简单的配置示例：

// www.javascriptcn.com code example
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

上面的配置中，我们使用了 @babel/preset-env 预设模块，它可以根据我们指定的浏览器版本，自动转换成对应的代码。在 targets 中，我们指定了要支持的浏览器版本，这里我们指定了 Chrome 58 和 IE 11。useBuiltIns 设置为 usage，表示只会引入代码中需要用到的 Polyfill，而不是全部引入。corejs 指定了使用的 core-js 版本。

安装 Polyfill

除了配置 Babel，我们还需要安装 Polyfill。我们可以使用 core-js 来安装：

npm install --save core-js

安装完后，我们需要在入口文件中引入 Polyfill：

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

上面的代码中，我们使用了 core-js/stable 来引入稳定版本的 Polyfill，以及 regenerator-runtime/runtime 来引入 Generator 和 async/await 相关的 Polyfill。

按需加载 Polyfill

在上面的配置中，我们将 useBuiltIns 设置为 usage，表示只会引入代码中需要用到的 Polyfill。但是，这种方式有一个缺点，就是如果我们在代码中使用了大量的新 API，就会导致 Polyfill 文件过大，影响页面加载速度。

为了解决这个问题，我们可以使用 @babel/plugin-transform-runtime 插件来实现按需加载 Polyfill。下面是一个简单的配置示例：

// www.javascriptcn.com code example
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": "3",
        "useESModules": true
      }
    ]
  ]
}

上面的配置中，我们使用了 @babel/plugin-transform-runtime 插件，并且将 useESModules 设置为 true，表示使用 ES6 模块化的方式来引入 Polyfill。

然后，我们需要在代码中使用 @babel/runtime-corejs3 包中的 helpers。我们可以使用 @babel/runtime-corejs3 包中的 helpers，来代替 Polyfill 中的重复代码。

import { Promise } from "@babel/runtime-corejs3";

上面的代码中，我们使用了 @babel/runtime-corejs3 包中的 Promise。

结语

本文介绍了如何配置 Babel，实现按需加载 Polyfill。通过按需加载 Polyfill，我们可以减少 Polyfill 文件的大小，提高页面加载速度。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8d19da941bf7134f6b521