修改node_modules内Gatsby主题后无法实时更新，需执行gatsby clean才生效

问题描述 #

基于他人Gatsby主题分叉修改后发布了新npm包@arturthemaslov/gatsby-theme-intro-maslov，但遇到以下问题：

• 修改node_modules内的主题文件（如footer.js）后，执行gatsby develop能检测到变更并输出构建成功日志，但浏览器无更新，必须执行gatsby clean清除缓存才生效。
• 两年前开发同类npm包时可正常实时更新，已清理node_modules并通过yarn更新所有依赖至最新版本。
• 运行gatsby develop时出现警告：

  warn The @arturthemaslov/gatsby-theme-intro-maslov plugin has generated no Gatsby nodes. Do you need it? This could also suggest the plugin is misconfigured.
  

• 尝试将主题文件放入根目录src文件夹进行覆盖，问题未解决。

示例代码变更：
原代码：

<p className="text-lead"><b>Last modified</b> {lastUpdate}</p>

修改为：

<p className="text-lead"><b>Last change</b> {lastUpdate}</p>

可能的原因与解决办法 #

1. Gatsby缓存策略限制 #

Gatsby默认不会监听node_modules内的文件变更（避免大量无效监听），两年前的版本监听策略不同，导致现在直接修改node_modules内的主题文件无法实时同步。

解决办法：使用本地链接主题包
开发阶段不要直接修改node_modules，改用本地链接方式关联主题源码：

1. 在主题包的根目录执行：

   yarn link # 或 npm link
   

2. 在你的项目根目录执行：

   yarn link @arturthemaslov/gatsby-theme-intro-maslov # 或 npm link @arturthemaslov/gatsby-theme-intro-maslov
   

修改主题源码时，项目会实时同步变更，无需清理缓存。

2. 组件Shadowing路径不匹配 #

尝试覆盖主题组件时，必须严格遵循Gatsby的组件Shadowing路径规则：
如果主题的footer.js路径为@arturthemaslov/gatsby-theme-intro-maslov/src/components/footer.js，你需要在项目中创建完全对应的路径：

src/@arturthemaslov/gatsby-theme-intro-maslov/components/footer.js

路径完全匹配后，Gatsby才会用你项目中的文件替换主题组件。

3. 插件无节点警告排查 #

警告提示主题未生成Gatsby节点，可按以下方式处理：

• 如果主题不需要生成节点，在主题包的gatsby-node.js中添加空导出以消除警告：

  // gatsby-node.js
  exports.createPages = () => {}
  exports.onCreateNode = () => {}
  

• 如果主题需要生成节点，检查gatsby-node.js中的API调用是否正确，比如createPages或onCreateNode逻辑是否存在错误，导致节点生成失败。

4. 临时强制监听node_modules（不推荐） #

如果必须临时修改node_modules内的文件，可通过环境变量强制Gatsby监听该目录：

GATSBY_WATCH_NODE_MODULES=true gatsby develop

注意：此方式会增加监听文件数量，可能导致开发服务卡顿，仅用于临时测试。

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