How to polyfill Array.prototype.find using webpack ProvidePlugin?
我使用的是webpack，并遵循了一些示例，分别基于whatwg-fetch和es6-promise软件包来对较旧的浏览器进行polyfill提取和Promise处理。
1 2 3 4 | new webpack.ProvidePlugin({ 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch', 'Promise': 'exports?global.Promise!es6-promise' }), |
这一切都有意义，但是现在我需要polyfill Array.prototype.find()，但是找不到如何使用webpack的ProvidePlugin功能来实现这一点。与众不同的是，它本质上是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 pollyfills(除获取以外)显示出一定的希望。
我现在确定的是以下解决方案。
在应用程序的根目录中，导入/需要babel-polyfill用于一般的ES6填充，例如Array.prototype.find，Object.assign和Promise。 由于提取是一种特殊情况，因为它被视为不适用于所有环境，因此为whatwg-fetch包含了一个单独的polyfill。
1 2 | import"babel-polyfill"; import"whatwg-fetch"; |
在webpack配置中，删除通过ProvidePlugin提供的任何ES6功能，但在此保留其他便利(例如JQuery orz)。
1 2 3 4 5 6 | 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来摇晃任何可能导致膨胀的未使用功能，也许其他人可以这样说。