React项目执行npm run build未捕获代码变更如何解决？

缓存类问题排查 #

• 先删除历史构建产物再执行构建：
  执行对应系统的删除命令清理旧build目录：
  • Linux/Mac：rm -rf build
  • Windows：rmdir /s /q build
    清理完成后再执行npm run build验证。
• 清理npm缓存并重装依赖：
  依次执行npm cache clean --force、rm -rf node_modules package-lock.json、npm install，完成后重新构建。
• 检查构建缓存配置：
  自定义webpack配置的项目，检查是否开启了cache.type: 'filesystem'，临时注释缓存配置后重试；CRA项目确认没有修改默认构建配置开启增量缓存。

配置类问题排查 #

• 核对文件编译范围：
  检查webpack的include/exclude规则、tsconfig.json的include字段，确认你修改的文件没有被排除在编译范围外。
• 核对构建命令配置：
  打开package.json检查scripts下的build字段，确认是正常的生产构建指令（CRA默认是react-scripts build），没有被修改为输出到其他目录的自定义指令。
• 核对路径大小写：
  Windows开发环境文件名不区分大小写，若import路径和实际文件名大小写不一致，会导致生产构建时读取旧文件，逐一核对路径与文件名的大小写完全匹配。

特殊场景排查 #

• 检查git提交状态：
  部分脚手架配置会在生产构建时自动拉取上次提交的代码打包，可临时提交当前修改git add . && git commit -m "temp test"后再尝试构建。
• 检查多项目目录冲突：
  若本地存在多个同名React项目，确认你执行构建命令的目录和你修改代码的目录完全一致。

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