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

解决方案：

// 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值是一个数组，并且merge函数尝试通过推入每个个体来合并两者原始字符串的字符作为新数组的元素。如果有人知道如何使更好的解决方案有效，那么我很乐意改善这个答案，但是在那之前，至少是可行的。

Answer 2

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

Gatsby进口Babel Polyfill

2 个答案: