javascript - 使用 babel-preset-env 将 polyfill 作为导入语句更好，还是将它们添加到 webpack.config.js 的条目中更好？

Question

babel-preset-env 提供选项 useBuiltIns将其应用于 babel-polyfill 并将 import 'babel-polyfill' 转换为特定的、基于环境的 import 'core-js/whatever .

如果我在我的 Webpack 入口部分添加 babel-polyfill(参见下面的示例)，是否应用此转换，或者在那种情况下 useBuiltIns 被忽略并替换为所有可能的进口？

entry: {
  app: ['babel-polyfill', './src/app.js']
}

Answer 1

它在您指定时起作用:

"presets": [ ..., "env" ]

我猜它与入口点无关，因为您的 ./src/app.js 已经包含一些带有要求 的代码。我只是不明白你想通过将 babel-polyfill 添加到入口点来实现什么，但在这种情况下似乎没有效果。

我将尝试详细说明它的工作原理。有一个 babel-preset-env 插件可以准备转换插件和 polyfill 的列表。此列表由 transform-polyfill-require-plugin 使用，它查找 import 和 require 语句并将其替换为特定于环境的模块列表.

它与入口点完全无关。通过添加 babel-polyfill，您只需将它的代码添加到您的包中。所以 transform-polyfill-require-plugin 在那里无论如何都不起作用。可以通过简单的调试来检查它。

而且你真的不需要它。您可以在您的应用程序中添加一次 require("babel-polyfill"); ，如文档中所述。你甚至不能导入 babel-polyfill 两次，因为它可能会导致错误，因为它会将自己写入 global 并检查冲突。