如何本地关联公共组件与项目仓库 实现公共组件修改即时测试

方案1：使用包管理工具内置link能力（轻量无额外依赖） #

这是最常用的软链接方案，npm/yarn/pnpm均原生支持：

• 第一步：进入本地公共组件仓库根目录，执行npm link，命令执行后会将当前公共组件包注册到全局npm缓存的软链接映射中
• 第二步：进入独立项目仓库根目录，执行npm link @common，注意此处的@common需要和你package.json中声明的公共组件包名完全一致，执行完成后项目将直接通过软链接引用本地的公共组件目录
• 公共组件代码修改后，只需执行公共组件自身的构建命令生成新的构建产物，项目中即可直接读取到最新内容，无需推送远程仓库、无需重新安装依赖
• 调试完成后恢复原有逻辑：在项目根目录执行npm unlink @common，再执行npm i即可恢复拉取远程GitHub仓库的公共组件版本

方案2：使用file协议直接引用本地路径（无需全局注册，适合临时调试） #

如果不想修改全局npm映射，可以直接修改项目依赖地址：

• 将项目package.json中@common的依赖地址修改为本地公共组件仓库的相对/绝对路径：

"@common": "file:../dev-frontend-common"

• 修改后执行一次npm i，后续公共组件修改并构建后，项目直接读取最新内容
• 调试完成后将@common的依赖地址改回原GitHub地址，重新执行npm i即可恢复原有逻辑

方案3：使用yalc管理本地依赖（适合高频调试场景，解决link冲突问题） #

如果需要频繁在多个项目中调试同一个公共组件，推荐使用yalc替代原生link，避免全局版本冲突：

• 先全局安装yalc：npm install yalc -g
• 进入本地公共组件仓库根目录，执行yalc publish，将当前构建后的公共组件包发布到本地yalc专属缓存
• 进入项目根目录，执行yalc add @common，即可将本地缓存的公共组件引入项目
• 后续公共组件修改完成后，在公共组件目录执行yalc push，项目会自动同步最新的包内容，无需手动重装依赖
• 调试完成后在项目根目录执行yalc remove @common，再执行npm i即可恢复原有远程依赖逻辑

注意事项：如果你的公共组件需要编译后才能使用，所有方案都需要在修改公共组件源码后执行对应的构建命令生成最新产物，项目才能读取到更新。你也可以给公共组件添加watch自动构建命令，开发时执行npm run watch即可实现代码修改后自动生成构建产物。如果遇到项目未热更的情况，可尝试清理项目构建工具缓存（比如vite删除node_modules/.vite目录，webpack执行构建时加--force参数）。

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