Question

我正在使用webpack并且已经按照例子分别基于whatwg-fetch和es6-promise包对旧版浏览器进行了polyfill fetch和Promise。

new webpack.ProvidePlugin({
    'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch',
    'Promise': 'exports?global.Promise!es6-promise'
}),

这一切都有意义但是现在我需要填充Array.prototype.find()但是找不到如何使用webpack的ProvidePlugin功能来实现这一点。让find变得与众不同的是它在Array原型上基本上是一个方法，我还没有找到任何使用ProvidePlugin来指定这些东西的例子。有没有人像这样使用webpack来填充ES6 array functions？有关如何实现这一目标的任何指示？我是否采用了错误/过时的方式，或者有更好的方法来实现我的需求吗？

到目前为止，我已尝试使用来自this polyfill package的paulmillr来尝试使用Why does Object.assign() require a polyfill when babel-loader is being used?，但尚未成功将其与ProvidePlugin一起使用。

更新

对此进行更多研究使我得到了babel polyfill。这些资源：

我还发现http://php.net/manual/en/pdo.query.php，babel-polyfill中缺少window.fetch polyfill，这解释了为什么它可能经常是由ProvidePlugin处理的特殊情况。我还拼凑在一起，ProvidePlugin比应用polyfill的一般工具更像是一种便利工具。直接导入babel-polyfill并删除Promise和其他ES6 pollyfill，除了fetch之外，在我的实验中看起来有点大有希望。

Answer 1

我现在解决的是以下解决方案。

在应用程序的根目录中导入/需要babel-polyfill用于一般ES6 polyfill，例如 Array.prototype.find ， Object.assign 和无极。由于 fetch 是一种特殊情况，因为它被视为不适合所有环境，因此whatwg-fetch包含单独的polyfill。

import "babel-polyfill";
import "whatwg-fetch";

在webpack配置中删除通过ProvidePlugin提供的任何ES6功能，但在那里留下任何其他便利（例如JQuery orz）。

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    // 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch',
    // 'Promise': 'exports?global.Promise!es6-promise',
}),

这应该为我提供更全面的ES6支持，手动选择我使用的每个功能。我希望Babel 5/6能够通过包含所有babel-polyfill来解决任何可能导致膨胀的未使用的功能，也许其他人可以对此说话。

如何使用webpack ProvidePlugin对Array.prototype.find进行polyfill？

更新

1 个答案: