在前端开发中，Babel-polyfill 是一个非常常用的工具，它可以让我们在使用一些新的 JavaScript API 或者语法时，使其在旧的浏览器中也能够正常运行。但是，在使用 Babel-polyfill 时，我们可能会遇到一个问题，即在使用 rollup 进行打包时，会出现编译失败的情况。
问题分析
在使用 rollup 进行打包时，它会对代码进行 tree-shaking，即只保留被使用的代码，而将未被使用的代码删除。但是，在使用 Babel-polyfill 时，它会在全局作用域中添加一些新的 API 或者语法，这些 API 或者语法在我们的代码中可能并没有被使用，但是却被 rollup 认为是被使用的，从而导致了编译失败。
解决方案
为了解决这个问题，我们可以使用 @babel/preset-env 中的 useBuiltIns 选项来按需引入 polyfill。useBuiltIns 选项有三个值可选：false、entry 和 usage。
- false：不引入任何 polyfill，需要手动引入。
- entry：根据浏览器兼容性自动引入所有需要的 polyfill，但是会导致打包出的文件体积非常大。
- usage：根据代码中使用的 API 或者语法自动引入需要的 polyfill，打包出的文件体积较小。
我们可以在 .babelrc 文件中进行配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-其中，corejs 选项是指定使用的 core-js 版本。如果不指定，将默认使用 core-js@2。
示例代码
下面是一个使用 Babel-polyfill 的示例代码：
import '@babel/polyfill' const arr = [1, 2, 3] console.log(arr.includes(2))
在使用 rollup 进行打包时，如果不做任何配置，会出现以下错误：
[!] Error: 'includes' is not exported by node_modules/@babel/polyfill/lib/index.js
我们可以通过在 .babelrc 文件中配置 useBuiltIns 选项来解决这个问题：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-配置之后，再次进行打包，即可成功编译。
总结
Babel-polyfill 是一个非常好用的工具，它可以让我们在代码中使用新的 JavaScript API 或者语法，而不必担心在旧的浏览器中无法运行。但是，在使用 rollup 进行打包时，它可能会导致编译失败。我们可以通过在 .babelrc 文件中配置 useBuiltIns 选项来解决这个问题，使得打包出的文件体积更小，更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fb49395b1f8cacd862f0e