当依赖项变更时重新编译create-react-app的高效方案

我太懂你这种反复手动安装本地包的痛苦了——既慢又不自动触发编译，完全拖慢开发节奏！下面给你一套流畅的解决方案，分两步搞定：让my-package自动打包，再让create-react-app能实时检测到变化并重新编译。

第一步：配置my-package的webpack监听模式 #

1. 先给my-package的package.json加个开发脚本，用来启动webpack的实时监听：

   "scripts": {
     "dev": "webpack --watch --mode development"
   }
   

   加上--mode development是为了提升打包速度，毕竟开发环境不需要生产级的压缩优化。

2. 检查你的webpack配置文件（比如webpack.config.js），确保输出路径和包的入口对应上。比如如果package.json里的main字段是dist/index.js，那webpack的output要指向dist目录：

   const path = require('path');
   
   module.exports = {
     // ...其他配置项
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'index.js',
       libraryTarget: 'commonjs2' // 确保包能被Node/CRA正确识别加载
     }
   };
   

3. 执行npm run dev启动监听，现在你修改my-package里的代码，webpack会自动重新打包到dist目录，不用手动触发。

第二步：让create-react-app自动检测my-package的变化 #

CRA默认不会监听node_modules目录的变化，所以我们需要用npm link关联本地包，再修改CRA的配置让它监听这个关联包：

方式一：用react-app-rewired修改CRA配置（无需eject） #

1. 在你的react-app项目里安装依赖：

   npm install --save-dev react-app-rewired
   

2. 在项目根目录创建config-overrides.js文件，添加如下配置，让CRA不忽略my-package的变化：

   const path = require('path');
   
   module.exports = function override(config) {
     config.watchOptions = {
       ignored: [
         path.resolve(__dirname, 'node_modules'),
         // 排除默认忽略的node_modules，但单独放行my-package
         '!node_modules/my-package'
       ]
     };
     return config;
   };
   

3. 修改react-app的package.json启动脚本，替换成react-app-rewired：

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

方式二：用npm link关联本地包 #

1. 在my-package目录下执行：

   npm link
   

   这会把你的本地包链接到npm全局目录，相当于给包建了个全局“快捷方式”。

2. 在react-app目录下执行：

   npm link my-package
   

   现在react-app会直接使用全局链接的my-package，而不是本地node_modules里的静态版本。

最后启动项目 #

1. 确保my-package的npm run dev已经在后台运行（持续监听代码变化并打包）
2. 启动react-app的npm start

现在你修改my-package里的代码，webpack会自动重新打包，CRA会立刻检测到my-package的变化，自动触发重新编译——再也不用手动执行npm i --save ../my-package了！

额外小技巧 #

• 如果my-package用了ES6+语法，记得在webpack配置里加上babel处理，避免CRA打包时出现语法错误
• 开发期间可以打开webpack的sourcemap，方便在CRA项目里直接调试my-package的代码

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