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这样的polyfill ES6 array functions?有关如何实现这一目标的任何指示?我是否采用了错误/过时的方式或是否有更好的方法来实现我的需求?
到目前为止,我已经尝试使用paulmillr从paulmillr开始尝试使用语法,但是使用ProvidePlugin并没有成功使用它.
更新
对此进行更多研究使我得到了babel polyfill.而这些资源:
> Why does Object.assign() require a polyfill when babel-loader is being used?
> Babel polyfill? What is that?
> Getting Babel 6 to work with IE8 (via. Gulp/Webpack)
我还发现here,babel-polyfill中缺少window.fetch polyfill,这解释了为什么它可能经常是由ProvidePlugin处理的特殊情况.我也在拼凑说,ProvidePlugin更像是一种便利工具而不是应用polyfill的通用工具.直接导入babel-polyfill并删除Promise和其他ES6 pollyfill除了fetch之外,在我的实验中到目前为止看起来有点大有希望.
我现在解决的是以下解决方案.在应用程序的根目录中导入/需要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能够通过包含所有babel-polyfill来解决任何可能导致膨胀的未使用的功能,也许其他人可以说话.