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

Question

我的 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 我会得到这个错误：

Uncaught Error: only one instance of babel-polyfill is allowed

两个输出我都需要 babel-polyfill。我能做什么？

Answer 1

在开发库（而不是应用程序）时，Babel 团队不建议在您的库中包含 babel-polyfill。我们推荐：

假设存在 ES6 全局变量，因此您将指示您的库用户在他们自己的代码库中加载 babel-polyfill。
通过启用 babel-plugin-transform-runtime 使用 babel-runtime，它会尝试分析您的代码以确定您正在使用的 ES6 库功能，然后重写代码以从 [=12= 加载 polyfilled 逻辑] 而不是来自全球范围。这种方法的一个缺点是它无法填充新的 .prototype 方法，例如 Array.prototype.find，因为它不知道 foo.find 是否是一个数组。

所以我的建议是从您的 dist/index.js 捆绑包中完全删除 babel-polyfill。

Answer 2

使用idempotent-babel-polyfill

import 'idempotent-babel-polyfill';

https://github.com/codejamninja/idempotent-babel-polyfill

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

How can I use babel-polyfill for multiple separated entries / outputs?

javascript

webpack

babeljs

babel-polyfill