Gatsby 导入 babel polyfill答案

【问题标题】：Gatsby import babel polyfillGatsby 导入 babel polyfill
【发布时间】：2018-07-18 11:47:15
【问题描述】：

我遇到的根本问题是 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 再次失败。

我该怎么办？

【问题讨论】：

【解决方案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 值是一个数组，合并函数试图通过推送原始的每个单独的字符来合并两者字符串作为新数组的元素。如果有人知道如何使更好的解决方案发挥作用，我很乐意改进这个答案，但在那之前，前者至少可以工作。

【讨论】：

【解决方案2】：

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

【讨论】：