8.polyfillpolyfill 对 Promise, Generator, Symbol等以及实例方法例如 Arr

polyfill 作用

项目中使用了一些语法特性（例如：Promise, Generator, Symbol等以及实例方法例如 Array.prototype.includes等），打包之后，某些浏览器不支持这些特性，必然会报错，使用 polyfill 来填充或者打补丁，那么就会包含该特性了。

polyfill 的使用

babel7.4.0之前，可以使用 @babel/polyfill 的包，但是该包现在已经不推荐使用了。
babel7.4.0之后，可以通过单独引入core-js（要打补丁的核心代码）和regenerator-runtime（生成器）来完成 polyfill 的使用。
安装：npm install core-js regenerator-runtime --save
配置：

module.exports = {
  presets: [
      // 用预设打包代码，配置 polyfill
    ["@babel/preset-env", {
      // false: 不用任何的polyfill相关的代码
      // usage: 代码中需要哪些polyfill, 就引用相关的api，确保最终包里的polyfill数量的最小化，打包的包相对会小一些
      // entry: 手动在入口文件中导入 core-js/regenerator-runtime, 根据目标浏览器引入所有对应的polyfill
      useBuiltIns: "usage",
      // 设置corejs的版本，目前使用较多的是3.x的版本，对应的包也会变大
      corejs: 3
    }],
    ["@babel/preset-react"]
  ]
}

以上三个配置解读：

useBuiltIns:false

打包后的文件不使用 polyfill 来进行适配，不需要设置corejs属性的。
源代码：

new Promise((resolve, reject) => {
  resolve(1)
})

打包之后：

new Promise((resolve, reject) => {
  resolve(1)
})

useBuiltIns:"usage"

代码中需要哪些 polyfill , 就引用相关的 api，确保最终包里的 polyfill 数量的最小化，打包的包相对会小一些。源代码：

new Promise((resolve, reject) => { resolve(1) })

打包之后： QQ截图20231102223023.png 3. useBuiltIns:"entry"
根据 browserslist 目标导入所有的polyfill，但是对应的包也会变大。
在入口文件上面引入：

import 'core-js/stable';  // coreJs标准
import "regenerator-runtime/runtime";