如何配置 Babel 实现按需加载（Polyfill）？

推荐答案

npm install --save-dev @babel/preset-env core-js regenerator-runtime

在 .babelrc 或 babel.config.js 中配置：

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

本题详细解读

1. 安装依赖

首先，需要安装 @babel/preset-env、core-js 和 regenerator-runtime 这三个依赖包。

• @babel/preset-env：Babel 的预设，用于根据目标环境自动确定需要的 Babel 插件和 polyfill。
• core-js：提供 ES5+ 的 polyfill。
• regenerator-runtime：提供 async/await 的 polyfill。

2. 配置 Babel

在 .babelrc 或 babel.config.js 文件中，配置 @babel/preset-env 的 useBuiltIns 选项为 "usage"，并指定 corejs 的版本。

• useBuiltIns: "usage"：表示按需加载 polyfill，只引入代码中用到的 polyfill。
• corejs: 3：指定使用 core-js 的版本为 3。

3. 工作原理

当 Babel 编译代码时，会根据目标环境（如浏览器版本）和代码中使用的 ES6+ 特性，自动引入相应的 polyfill。这样可以减少最终打包文件的体积，避免引入不必要的 polyfill。

4. 注意事项

• 确保 core-js 和 regenerator-runtime 的版本与 @babel/preset-env 兼容。
• 如果项目中有多个 Babel 配置文件，确保它们之间的配置一致，避免冲突。