javascript - 在 Gatsby 中始终提供使用浏览器列表的 Polyfill

Question

我正在使用 Gatsby (doc) 支持的浏览器列表来试验 Gatsby 和 polyfills。

使用默认的浏览器列表配置，我得到了为 IE11 创建 polyfill 和工作警报的预期结果。见我的github repo example .该网站目前可用here at Netlify .

所以，我可以在生产代码中看到箭头函数和 array.prototype.find 函数是如何填充的。到目前为止没有什么奇怪的。

现在，如果我将浏览器列表更改为 last 2 Chrome versions并构建生产我希望数组 find() 方法的 polyfill 会消失，因为它受 chrome 支持。但是，我相信我仍然可以在 app-2934fab61c547573181d.js 中找到相同的 polyfill(来自 core-js)。 :

    dRSK: function(t, e, n) {
        "use strict";
        var r = n("XKFU")
          , o = n("CkkT")(5)
          , i = !0;
        "find"in [] && Array(1).find((function() {
            i = !1
        }
        )),
        r(r.P + r.F * i, "Array", {
            find: function(t) {
                return o(this, t, arguments.length > 1 ? arguments[1] : void 0)
            }
        }),
        n("nGyu")("find")
    },

所以我的问题是:为什么这些 polyfills 仍然可用，即使我使用显然不需要的浏览器列表查询？

Answer 1

这可能听起来有点疯狂，但“它适用于我的机器”:)

我跑了npm run build在您的存储库中，捆绑包中包含 find polyfill - 预计自 browserslist 起是 [">0.25%", "not dead"] .

更改 browserslist至["last 2 Chrome versions"]没有改变构建中的任何东西 - find还在那里。

经过一些实验后，我注意到任何 browserslist更改被忽略。

所以我尝试了这个:

已更改 browserslist在 package.json

跑了npm run clean - 删除 .cache和 public

跑了rm -rf node_modules

跑了npm install

跑了npm run build : 和 find polyfill 不见了!

希望这对你有用!

我对此没有合乎逻辑的解释。

PS:在他们推荐给 clean 的文档中编辑后 package.json - details .重新安装 node_modules似乎有点极端，但似乎可以解决它。