当前位置 : 主页 > 大数据 > 区块链 >

数组 – 如何使用webpack ProvidePlugin对Array.prototype.find进行polyfill?

来源:互联网 收集:自由互联 发布时间:2021-06-22
我正在使用webpack,并分别根据whatwg-fetch和es6-promise软件包跟踪示例到polyfill fetch和旧版浏览器的Promise. new webpack.ProvidePlugin({ 'fetch': 'imports?this=global!exports?global.fetch!whatwg-fetch', 'Promise': 'ex
我正在使用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这样的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来解决任何可能导致膨胀的未使用的功能,也许其他人可以说话.

网友评论