2021年如何在Babel中使用polyfills？@babel/polyfill废弃后配置方案咨询

Babel polyfill 替代方案操作说明 #

你提到的安装core-js+regenerator-runtime后手动引入入口的方案是可行的，实际使用中可以根据项目需求选择以下两种操作方式：

方案1：全量引入（操作简单，适合小型项目） #

• 执行依赖安装命令，注意不要选已停止维护的v2版本，使用当前主流的v3版本：
  yarn add core-js@3 regenerator-runtime
• 在项目入口文件最顶部添加两行引入代码即可：

import 'core-js/stable'
import 'regenerator-runtime/runtime'

该方案缺点是会引入所有兼容polyfill，打包体积相对更大。

方案2：按需自动注入（更推荐，优化打包体积） #

如果项目已经配置了@babel/preset-env，可以通过修改babel配置实现按目标浏览器范围、按代码实际使用的API自动注入所需polyfill，不需要手动在入口引入：

• 同样先安装依赖：
  yarn add core-js@3 regenerator-runtime
• 修改babel配置文件（babel.config.json/.babelrc）中@babel/preset-env的配置项：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

配置里的targets字段可替换为项目实际需要兼容的浏览器范围

特殊场景注意 #

如果你开发的是第三方类库/工具包，不建议使用上面两种方案，会造成全局作用域污染，容易和宿主项目的polyfill产生冲突，建议改用@babel/plugin-transform-runtime实现非全局的polyfill注入。 #

内容的提问来源于stack exchange，提问作者nth-chile