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

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'
}),

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

到目前为止,我已经尝试使用paulmillr的polyfill 包来试验语法,但是使用ProvidePlugin并没有成功使用它.

更新

对此进行更多研究使我得到了babel polyfill.而这些资源:

• 为什么在使用babel-loader时Object.assign()需要polyfill？
• Babel polyfill？那是什么？
• 让Babel 6与IE8一起工作(通过.Gulp/Webpack)

我在这里也发现了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和Promise。由于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 能够对任何未使用的功能进行 Tree-Shake，否则可能会通过包含所有 babel-polyfill 来导致膨胀，也许其他人可以对此进行讨论。