Gatsby 导入 babel polyfill

Question

我运行遇到的根本问题是 IE11 因 Object doesn't support property or method 'find' 而失败。看来我需要导入babel-polyfill，但是我找不到合适的导入位置。

我试过在布局 index.js 中导入，但是当我这样做时 gatsby build 失败 Module build failed: Error: only one instance of babel-polyfill is allowed。
我试过要求在 gatsby-browser.js 和 gatsby-node.js 中构建，但是当我这样做时，IE 中的错误仍然发生，就好像 babel-polyfill 从未加载过一样。
我试过在 gatsby-config.js 中要求，但是当我这样做时 gatsby build 再次失败。

我该怎么办？

Answer 1

您可以尝试使用 babel-presets-env，因为您需要的 polyfill 包含在预设中。
否则，我强烈建议 http://polyfill.io/ 如果您可以依赖第 3 方服务，那么可以使所有这些 polyfiling 的东西变得更加简单。

Answer 2

解决方案：

// gatsby-node.js

exports.modifyWebpackConfig = ({ config, stage }) => {
    if (stage === "build-javascript") {
        config._config.entry.app = ["babel-polyfill", config.resolve().entry.app];
    }

    return config;
};

唯一脏的部分是访问私有（下划线前缀）_config 属性。 理论上，更合适的解决方案应该是这样的：

exports.modifyWebpackConfig = ({ config, stage }) => {
    if (stage === "build-javascript") {
        config.merge({
            entry: {app: ["babel-polyfill", config.resolve().entry.app]}
        });
    }

    return config;
};

这不起作用的原因是因为原始 entry.app 值是一个字符串，而我的新 entry.app 值是一个数组，合并函数试图通过推送来合并两者原始字符串的每个单独字符作为新数组的元素。如果有人知道如何使更好的解决方案起作用，我很乐意改进这个答案，但在那之前，前者至少起作用。

Gatsby 导入 babel polyfill

Gatsby import babel polyfill

javascript

gatsby