Javascript 如何将babel polyfill用于多个单独的条目/输出？

在我的

webpack.config.js

中有这样一个文件，可以从两个源创建两个不同的输出：

module.exports = {
  entry: {
    'dist/index.js': ['babel-polyfill', './src/Component.jsx'],
    'example/bundle.js': ['babel-polyfill', './src/Page.jsx'],
  },
  output: {
    path: './',
    filename: '[name]',
  },
  ...

用webpack编译它很好，但是如果我在浏览器中加载

index.js

，就会出现以下错误：

未捕获错误：只允许一个babel polyfill实例

我需要两个输出巴贝尔polyfill。我能做什么？

当开发库（与应用程序相反）时，Babel团队不建议在库中包含

Babel polyfill

。我们建议：

假设ES6全局代码存在，那么您应该指示库用户在他们自己的代码库中加载

babel polyfill

通过启用

babel plugin transform runtime

，使用

babel runtime

，它尝试分析您的代码以确定您正在使用的ES6库功能，然后重写代码以从

babel runtime

而不是从全局范围加载多填充逻辑。这种方法的一个缺点是它无法多填充新的

.prototype

方法，如

Array.prototype.find

，因为它无法知道

foo.find

是否是数组

---

因此，我的建议是从

dist/index.js

包中完全删除

babel-polyfill

。

使用幂等的babel-polyfill

import 'idempotent-babel-polyfill';

---

您能否澄清一下为什么您特别希望在两个入口点都使用它？它相当大，如果没有很好的理由，你真的不想加载两次。当然！我想创建一个react组件作为npm包（dist/index.js）。为了单独开发组件，我创建了一个小页面（example/bundle.js），加载组件并显示结果。当我处理组件时，我可以在浏览器的小页面上看到结果。开销不会是一个问题，因为在大多数情况下代码仍然很小。您推荐什么选项？另外，如果我想独立加载它，你会建议怎么做？用导入“babel polyfill”来制作一个js文件并添加其条目并首先加载？