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

Question

我正在使用 Gatsby (doc) 支持的 browserlist 试验 Gatsby 和 polyfills。

使用默认的浏览器列表配置，我得到了预期的结果，它为 IE11 创建了 polyfill 和一个工作警报。看我的 github repo example. The site is currently available 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")
    },

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

Answer 1

这听起来有点疯狂，但是 "It works on my machine" :)

我运行 npm run build 在你的 repo 中并且包中包含 find polyfill - 这是预期的，因为 browserslist 是 [">0.25%", "not dead"].

将 browserslist 更改为 ["last 2 Chrome versions"] 并没有改变构建中的任何内容 - find 仍然存在。

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

所以我尝试了这个：

在 package.json

browserslist

运行 npm run clean - 删除 .cache 和 public
运行 rm -rf node_modules
运行 npm install
运行 npm run build: find polyfill 不见了！

希望这对你有用！

我对此没有合理的解释。

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

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

Polyfill using browserlist in Gatsby always provided

javascript

gatsby

babel-preset-env