修改create-react-app项目node_modules包无效果，如何清除缓存？

CRA的核心缓存机制 #

• Webpack内存缓存：CRA内置的Webpack会将已解析的模块缓存至内存，重启开发服务器时不会完全清空，尤其是node_modules内的包，默认被标记为高优先级缓存对象。
• 本地文件缓存：Webpack默认启用的文件缓存会将编译结果存储在node_modules/.cache目录，重启服务时会复用该缓存，忽略文件变更。
• Fast Refresh限制：React Fast Refresh对node_modules目录的变更敏感度极低，默认不会监听该目录下的文件修改。

彻底清除CRA缓存的步骤 #

1. 删除Webpack本地缓存目录

   # Mac/Linux
   rm -rf node_modules/.cache
   

   # Windows
   Remove-Item -Recurse -Force node_modules\.cache
   

2. 禁用缓存启动开发服务器
   在启动命令中添加--no-cache参数，强制Webpack跳过缓存：

   yarn start --no-cache
   

3. 清除Yarn全局缓存（可选）
   若本地包版本被Yarn全局缓存，执行：

   yarn cache clean
   

4. 强制刷新浏览器缓存
   按Ctrl + Shift + R（Windows）或Cmd + Shift + R（Mac）强制清空浏览器静态资源缓存。

更可靠的本地依赖调试方案（规避React版本冲突） #

方案1：使用yarn pack直接引入本地包 #

1. 在本地开发包目录执行打包命令：

   yarn pack
   

   生成类似my-package-1.0.0.tgz的压缩包。
2. 修改主React项目的package.json依赖：

   "dependencies": {
     "my-package": "./path/to/my-package-1.0.0.tgz"
   }
   

3. 执行yarn install，主项目将直接安装本地包，修改包内容后重新打包并执行yarn install即可生效。

方案2：用react-app-rewired修改Webpack配置（无需eject） #

1. 安装依赖：

   yarn add -D react-app-rewired
   

2. 在主项目根目录创建config-overrides.js：

   const path = require('path');
   
   module.exports = function override(config, env) {
     // 映射本地包源码，共享主项目React版本
     config.resolve.alias['my-package'] = path.resolve(__dirname, '../your-local-package/src');
     // 让Webpack监听本地包文件变化
     config.module.rules.forEach(rule => {
       if (rule.oneOf) {
         rule.oneOf.forEach(oneOfRule => {
           if (oneOfRule.include) {
             oneOfRule.include = [oneOfRule.include, path.resolve(__dirname, '../your-local-package/src')];
           }
         });
       }
     });
     // 禁用模块缓存
     config.cache = false;
     return config;
   };
   

3. 修改package.json启动脚本：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

4. 启动服务后，修改本地包源码会触发Fast Refresh自动更新。

方案3：使用yalc管理本地包 #

1. 全局安装yalc：

   yarn global add yalc
   

2. 在本地开发包目录执行发布命令：

   yalc publish
   

3. 在主React项目添加本地包：

   yalc add my-package
   

4. 修改本地包后执行yalc push，主项目将自动更新依赖，且不会出现React版本重复问题。

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