基于yalc的本地组件库联调

基于yalc的本地组件库联调

背景

一些独立逻辑的组件库我们会采用独立Npm库的管理方式，如果不基于Monorepo的话，联调起来会非常费劲。每次修改代码都不能实时验证在应用中的具体效果，要经过独立组件库打包发版、主应用更新组件库版本并执行install几个步骤后才能见效，这种时候就要使用到本地多库联调的方案了，yalc就是用来做这件事的。

基础使用

// 安装
pnpm install -g yalc

// 在组件库中，使用该命令发布该库
yalc publish


// 在主系统项目中，可以使用 yalc 来添加你的组件库
yalc link 组件库的name

热更新

可借助 nodemon 和 yalc 来实现组件库的本地联调

package.json命令添加

"scripts": {
  "dev": "run-p yalc:push:auto build:watch",
  "dev:win": "run-p yalc:push:auto:win build:watch",
  "build:watch": "vite build --watch",
  "yalc:push:auto": "nodemon --watch es --exec 'yalc push'",
  "yalc:push:auto:win": "nodemon --watch es --exec \"npx yalc push\"",
},

然后直接pnpm dev即可实现热更新联调

如果在开发时没有热重载，需要在主项目下删除node_modules下的.cache目录并重新跑 npm run dev

善后

本地联调完，记得清除对应的依赖

yalc remove 组件库的name
// or
yalc remove --all // 移除所有依赖并还原