Gatsby进口Babel Polyfill [英] Gatsby import babel polyfill

问题描述

我遇到的根本问题是IE11失败，原因是 Object不支持属性或方法"find" .似乎我需要导入babel-polyfill，但找不到合适的位置进行导入.

The root issue I'm running into is IE11 fails with Object doesn't support property or method 'find'. It seems I need to import babel-polyfill, but I can't find the right place to do the import.

• 我尝试导入布局index.js，但是当我这样做时， gatsby构建失败，并且模块构建失败:错误:仅允许babel-polyfill的一个实例.
• 我尝试在生成的gatsby-browser.js和gatsby-node.js中进行要求，但是当我这样做时，IE中的错误仍然会发生，就像从未加载过babel-polyfill一样.
• 我尝试在gatsby-config.js中进行要求，但是当我这样做时， gatsby build 再次失败.

• I've tried importing in the layout index.js, but when I do then gatsby build fails with Module build failed: Error: only one instance of babel-polyfill is allowed.
• I've tried requiring in gatsby-browser.js and gatsby-node.js, which builds, but when I do that then the error in IE still occurs as if babel-polyfill never loaded.
• I've tried requiring in gatsby-config.js, but when I do then gatsby build fails again.

我该怎么办?

推荐答案

解决方案:

// gatsby-node.js

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

    return config;
};

唯一脏的部分是访问私有(带下划线的前缀) _config 属性.理论上，更合适的解决方案将是这样的:

The only dirty part is accessing the private (underscore prefixed) _config property. In theory, the more appropriate solution would have gone like this:

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

    return config;
};

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

The reason this didn't work is because the original entry.app value was a string, and my new entry.app value is an array, and the merge function tries to merge the two by pushing each individual character of the original string as an element of the new array. If anyone knows how to make the better solution work, I'd love to improve this answer, but until then, the former at least works.

这篇关于Gatsby进口Babel Polyfill的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！