How to polyfill Array.prototype.find using webpack ProvidePlugin?

Question

I use webpack and used examples for polyfill fetch and Promise for older browsers based on whatwg-fetch and es6-prom packages respectively.

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

It all makes sense, but now I need polyfill Array.prototype.find () , but cannot find how to achieve this using the webpack ProvidePlugin function. The fact is, the search differs in that it is essentially an Array prototype method, and I have not found examples of how to specify such things using ProvidePlugin. Has anyone used webpack to polyfill an ES6 array function like this? Any guidance on how this can be achieved? Am I going about this in a wrong / outdated way, or is there a better way to achieve what I need?

So far I have been trying to experiment with the syntax using this polyfill package from paulmillr , but have not managed to use it with ProvidePlugin.

UPDATES

Further research into this led me to babel polyfill. And these resources:

• Why does Object.assign () require a polyfill when using the babel loader?
• Babylon polyfill? What is it?
• Getting Babel 6 to work with IE8 (via. Gulp / Webpack)

I also found here that window.fetch polyfill is missing in babel-polyfill, which explains why this is often the special case that ProvidePlugin deals with. I also put together that ProvidePlugin is more of a convenience tool than a regular tool for applying poly regiments. Directly importing babel-polyfill and removing Promise and other pollyfills ES6, with the exception of extraction, will seem somewhat promising in my experiments so far.

Answer 1

At the moment, I have decided the following:

In the root folder of the application import / require babel-polyfill for common ES6 policies, such as Array.prototype.find, Object. appoint and promise. Since sampling is a special case, since it is considered that it is not suitable for all environments, a separate polyfill is used for whatwg-fetch .

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

In the webpack configuration, remove all the ES6 features provided through ProvidePlugin, but leave there any other amenities (e.g. jQuery orz).

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

This should give me more rounded ES6 support with a manual selection for every feature I use. I hope Babel 5/6 can Tree-Shake use any unused function that would otherwise cause bloat, including all babel-polyfill, maybe someone else can talk about it.