如何在Gatsby中集成whatwg-fetch fetch polyfill？

我来帮你搞定这个问题！在Gatsby里集成whatwg-fetch polyfill有几种靠谱的方式，针对你提到的在gatsby-node.js中配置webpack entry的需求，我给你详细拆解步骤，顺便补充其他实用方案：

一、通过gatsby-node.js修改Webpack Entry（全局全环境加载） #

这种方式能确保polyfill在所有入口文件的最前面加载，覆盖构建的全流程，包括服务端渲染环节，是最全面的方案。

1. 先确保已经安装依赖：

npm install whatwg-fetch --save
# 或者用yarn
yarn add whatwg-fetch

2. 在项目根目录的gatsby-node.js中，利用Gatsby提供的onCreateWebpackConfig API修改配置。这里推荐合并现有entry的写法，避免破坏Gatsby默认的配置逻辑：

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  // 获取当前的Webpack配置
  const currentConfig = getConfig();

  // 遍历所有入口，给每个入口的开头添加whatwg-fetch
  Object.keys(currentConfig.entry).forEach(entryKey => {
    currentConfig.entry[entryKey] = ['whatwg-fetch', ...currentConfig.entry[entryKey]];
  });

  // 替换原配置
  actions.replaceWebpackConfig(currentConfig);
};

修改后，whatwg-fetch会在所有业务代码之前加载，保证fetch API在构建、浏览器、服务端渲染等所有场景下都能正常使用。

二、你已尝试的gatsby-browser.js方案（补充完善） #

你在gatsby-browser.js中添加import 'whatwg-fetch';的做法是有效的，但它只作用于浏览器端。如果你的项目涉及服务端渲染（SSR），建议同时在gatsby-ssr.js中也添加同样的导入语句：

// gatsby-ssr.js
import 'whatwg-fetch';

这样就能同时覆盖浏览器和服务端环境，确保SSR过程中fetch也能正常工作。

三、按需加载（特定页面/组件使用） #

如果不需要全局加载polyfill，只在特定页面或组件中使用，可以直接在对应文件顶部导入：

import 'whatwg-fetch';

// 之后就可以正常使用fetch API了
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

方案选择总结 #

• 全局全环境覆盖：优先选择gatsby-node.js修改entry的方式
• 简单快速覆盖前后端：用gatsby-browser.js + gatsby-ssr.js双文件导入
• 按需加载：在需要的文件中单独导入

内容的提问来源于stack exchange，提问作者kyw