Webpack 配置 Babel 实现 ES6 转 ES5 及 Polyfill 方案详解

Webpack 中 Babel 基础配置

在 Webpack 项目中处理 JavaScript 代码兼容性时，Babel 是一个核心工具。

首先访问 Babel 官方网站，按照官方提供的教程指引进行基础环境的安装。

执行安装命令以获取必要的依赖包。

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

接下来需要在 Webpack 的配置文件中定义 rules 规则，以便让 Webpack 知道如何处理 JavaScript 文件。

module: {
 rules: [
  { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
 ]
}

为了简化配置，可以生成一个 .babelrc 文件来集中管理 Babel 的预设和插件。

{
 "presets": ["@babel/preset-env"]
}

Polyfill 处理策略：useBuiltIns 参数详解

完成上述配置后，Webpack 已经能够正确地将高版本的 JavaScript 语法转换为低版本语法。然而，对于新增的 API（例如 Promise），Babel 默认并不会进行转换，此时需要引入其他插件来处理。

可以使用 polyfill 插件来补充这些新增 API，但需要注意的是，从 Babel 7.4.0 版本开始，某些旧的处理方法已被弃用。

执行安装命令以获取 polyfill 相关的依赖。

npm install --save @babel/polyfill

修改 .babelrc 配置文件，添加相应的预设和参数设置。

{
 "presets": [
  [
   "@babel/preset-env",
   {
     "useBuiltIns":"usage" // 只转化使用了的API
   }
  ]
 ]
}

在需要转换的 JavaScript 文件入口引入 polyfill，以确保全局 API 的可用性。

import "@babel/polyfill";

理解 @babel/polyfill 与 @babel/preset-env 之间的关系至关重要。

@babel/preset-env 中与 @babel/polyfill 交互的关键参数包括 targets 和 useBuiltIns 两个。

targets 参数用于指定支持的目标浏览器列表，从而确定需要转换哪些语法特性。

useBuiltIns 参数有三个可选值：“entry”、“usage”和 false。默认值为 false，该参数决定了 Babel 在打包时如何处理 @babel/polyfill 的引入语句。

当 useBuiltIns 设置为“entry”时，Babel 会结合 targets 配置，将文件中 import '@babel/polyfill' 的语句转换为一系列具体的引入语句。它会移除目标浏览器已支持的 polyfill 模块，但无论代码中是否实际使用了这些 API，只要目标浏览器不支持，都会引入对应的 polyfill 模块。

当 useBuiltIns 设置为“usage”时，无需在代码中手动编写 import '@babel/polyfill'。Babel 会在打包时根据代码实际使用情况，结合 targets 配置，自动引入代码中实际用到的部分 polyfill 模块，从而减小打包体积。

当 useBuiltIns 设置为 false 时，Babel 对 import '@babel/polyfill' 语句不作任何处理，也不会自动引入任何 polyfill 模块。

使用 plugin-transform-runtime 优化依赖

另一种优化方案是使用 plugin-transform-runtime 插件。

执行安装命令以获取该插件的依赖。

npm install --save-dev @babel/plugin-transform-runtime

修改 .babelrc 文件，在 plugins 数组中配置 @babel/plugin-transform-runtime 及其选项。

{
"presets": [
  [
   "@babel/preset-env"
  ]
 ],
 "plugins": [
  [
   "@babel/plugin-transform-runtime",
   {
    "absoluteRuntime": false,
    "corejs": 3,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
   }
  ]
 ]
}

需要注意的是，配置中的 corejs 设置项的值不同，需要安装不同的依赖包，具体对应关系需参考官方文档或相关表格。

以上即为通过 Webpack 和 Babel 实现 ES6 转 ES5 及相关 API 兼容处理的完整方案，希望内容能对读者有所帮助。