3

我有这个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。我能做些什么?

4

2 回答 2

4

在开发库(而不是应用程序)时,Babel 团队不建议将其包含babel-polyfill在您的库中。我们建议:

  1. 假设 ES6 全局变量存在,因此您将指示您的库用户加载babel-polyfill他们自己的代码库。
  2. babel-runtime通过 enable使用babel-plugin-transform-runtime,它会尝试分析您的代码以找出您正在使用的 ES6 库功能,然后重写代码以从而babel-runtime不是从全局范围加载 polyfill 逻辑。这种方法的一个缺点是它无法.prototype像 polyfill 那样填充新方法,Array.prototype.find因为它不知道是否foo.find是一个数组。

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

于 2016-09-06T16:03:55.247 回答
0

使用 idempotent-babel-polyfill

import 'idempotent-babel-polyfill';

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

于 2018-05-14T18:27:07.553 回答