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，我会收到此错误：

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

我需要 babel-polyfill 两个输出。我该怎么办？

Answer 1

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

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

因此，我的建议是完全删除dist/index.js捆绑中的A S D1 A S D2 A S D3 B S C B S E1 B S E2。

Answer 2

使用idempotent-babel-polyfill

import 'idempotent-babel-polyfill';

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

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

2 个答案: