nodemon + yalc本地库调试工具

1、在组件库下安装

yarn add modemon -D  
  
// modemon 监听文件修改，进行从新打包和发布  
// 如果当前构建后，package.json 中 private: true 时，直接 yalc push 会报错：  
// Will not publish package with private: true use --private  
// flag to force publishing. 需要使用 yalc push --private 强制发布。  
  
"scripts": {  
"watch": "nodemon -x npm run lib && cd lib && yalc push --private",  
}  

2、全局安装 yalc

yarn add yalc -g  

3、发布本地库

// publish 到了本地 yalc 仓库 file:.yalc/element-plus-form-test  
yarn publish  

在全局的 .yalc 就有库名和发布的版本 可以定期的清除不然很浪费空间

4、使用组件的项目

yarn add 库名  

// 在使用组件的项目中同时也会增加一个 yalc.lock 的文件 内容如下：  
{  
"version": "v1",  
"packages": {  
"element-plus-form-test": {  
"signature": "dddd9edaf1ad6d2e63b9c49aff68e57f",  
"file": true,  
"replaced": "^1.6.1-beta.8.14"  
}  
}  
}  
  
// 在执行 yalc add 之前package.json 中是之前的版本依赖  
"dependencies": {  
"element-plus-form-test": "^1.6.1-beta.8.14",  
},  
// 执行 yacl add 之后引用地址变成了本地地址  
"dependencies": {  
"element-plus-form-test": "file:.yalc/element-plus-form-test",  
},  

5、本地库更新之后推送

yalc push  

6、在正式打包的时候在 使用本地库的项目下

yalc remove -all  
// 删除之后又变回了原来的版本号  
"dependencies": {  
"element-plus-form-test": "^1.6.1-beta.8.14",  
},  
// 同时也会把 yalc.lock 文件删除  

7、比较复杂的缓存问题

当yalc 发布完之后你会发现依赖都已经更新，但是页面不管是刷新还是重启服务都不会发生变化，其实是vite的缓存机制导致的， 在上图中在启动服务时候会把依赖缓存放到.vite目录下。先看一下官网的一段描述

Vite 将预构建的依赖项缓存到 node_modules/.vite 中。它会基于以下几个来源来决定是否需要重新运行预构建步骤：  
  
包管理器的锁文件内容，例如 package-lock.json，yarn.lock，pnpm-lock.yaml，或者 bun.lockb；  
补丁文件夹的修改时间；  
vite.config.js 中的相关字段；  
NODE_ENV 的值。  
只有在上述其中一项发生更改时，才需要重新运行预构建。  
  
如果出于某些原因你想要强制 Vite 重新构建依赖项，你可以在启动开发服务器时指定 --force 选项，或手动删除 node_modules/.vite 缓存目录。  

// 刚开始的时候我是 执行命令重启强制 重新构建依赖，但是我不想每次都重新启动  
"scripts": {  
"serve": "vite --force",  
}  
// 就看到了可以重新构建的几个方法， 其中修改 vite.config.js 中的相关字段比较靠谱  
// 添加一个空格保存 vite 的服务就可以进行重新启动  
// 也就是说 从新执行 vite --force 方便， 还是修改 vite.config.js 里边添加空格方便大家自己选择  

8、

最后强调一下最重要的一点， yalc 只能用在开发环境，所以在生产环境一定执行 yalc remove -all，之后在执行 yarn 安装本身的依赖