使用yalc本地调试自己写的npm包
补充
vite 无法检测到 yalc 安装的包的变化
问题描述： 我在 npm 包项目改了代码之后，在依赖了我 npm 包的项目中没有体现我最新的代码改变 如何解决： 需要做两步
- 禁止
vite对我本地这个 npm 包进行缓存, 配置来自官网 - 禁止浏览器缓存或者每次 npm 包代码更新重发布之后，以无缓存的方式强制刷新(
ctrl + F5)一次浏览器
忘了替换 yalc 仓库中的包依赖，直接打包会怎么样?
还是能成功打包，所以最好在打包之前先执行yalc check
这时候使用yalc check, 会出现如下结果，这是使用yalc remove --all删除所有yalc仓库的依赖, 同时yalc remove命令也会将对应的包恢复到yalc add之前的版本
pnpm 的 monorepo? 不对
一开始以为monorepo是很好的解决方案, 但真正使用了几次之后才发现，monorepo并不适合自己写独立的npm包
说下我的需求以及问题:
- 自己独立的 npm 包，期望能单独一个项目(这点 pnpm 的 monorepo 功能可以满足)
- 自己独立的 npm 包，期望像真正的已发布的 npm 包一样被其他项目引入(这点 pnpm 的 monorepo 功能可以满足)
- 自己独立的 npm 包，期望能够单独打包，单独发布(这点 pnpm 的 monorepo 功能可以满足)
- 自己独立的 npm 包要能根据
git commit生成changelog, 这点 pnpm 的 monorepo 功能不好实现，因为我将 monorepo 整个作为了一个 git 项目，所以单独的 npm 包项目并没有自己的git-commit信息，那也就没法根据git commit生成changelog, 有没有解决方法？有, 那就是使用git的submodule功能,但这无疑增加了git的使用负担
最终解决方案yalc
yalc可以通过模拟发布npm包并将它们存放在一个特殊的全局存储中（例如位于~/.yalc中），当你在项目中通过命令引入时会将包内容拉入当前项目的.yalc文件目录下，并在项目根目录下创建一个特殊的yalc.lock文件（类似yarn.lock和package.json），用来确保执行yalc例行程序时的一致性.yalc完全模拟了 npm 正式发布
查看yalc支持的所有命令
yalc --help
安装yalc
npm i yalc -g
使用yalc
yalc 全局存储仓库位置
yalc dir
模拟发布(yalc publish/push)
在 npm 包项目中模拟发布，此时会将包资源存储在yalc的全局存储中（此时可以通过yalc dir获取yalc全局存储的位置，并到该位置看是否存在该包）
PS E:\workspace\front\test\yalc-test\my-button> yalc publish
Running prepare script: husky install
> project-template@0.0.1 prepare E:\workspace\front\test\yalc-test\my-button
> husky install
husky - Git hooks installed
project-template@0.0.1 published in store.
自己的 npm 包更新之后，先打包，再执行yalc push发布, yalc 会自动将变更推送到每个引入依赖的项目, 你引入 yalc 仓库包的项目无需做任何变更，只需要重新启动即可获取到最新版本了
yalc push
重要说明
貌似yalc提供的反发布的功能无法删除yalc仓库的包文件，官方提供的yalc installations clean [package]貌似无法删除yalc仓库中的包, 只能通过yalc dir获取到仓库目录，然后再手工删除该目录，不过为了稳妥起见，最好还是先执行yalc installations clean [package], 再到仓库中手工删除
WARNING
在删除之前，请通过yalc installations show [package] 查看具体包的被引用情况，确保没有其他项目引用该包再删除
其他项目中引入发布到yalc仓库的包
通过yalc add your-package [-D]方式
添加dependencies依赖:yalc add your-package, 添加devDependencies依赖:yalc add your-package -D, 此时会在项目更目录生成yalc.lock文件, 并在package.json中增加"your-package": "file:.yalc/your-package",
通过yalc link your-package方式
进入需要引入资源的项目执行yalc link your-package(your-package 表示你yalc全局仓库中存在的包名)
该方式并不会在你的package.json中增加任何内容（但你的项目中可以使用其他普通npm包一样，使用yalc link的包），但会在你的项目根目录生成一个yalc.lock文件, 文件内容大概如下:
json
{
"version": "v1",
"packages": {
"my-button": {
"signature": "686c4c0e9609ebe310556aedb15bb01d"
}
}
}
并且你的node_modules目录也会有对应包的软连接
PS E:\workspace\front\test\yalc-test\web-project> yalc link my-button
Package my-button@0.0.1 linked ==> E:\workspace\front\test\yalc-test\web-project\node_modules\my-button
更新项目中的 yalc 依赖
虽然yalc push自动帮你将引入了yalc 仓库包的项目的对应包更新到最新状态，但如果万一没有变成最新状态，那你还可以通过yalc update your-package方式执行一次更新
检查项目中的yalc依赖
可以人肉到package.json找，或看项目目录下是否存在yalc.lock文件，但没必要, yalc提供了专门的命令查找项目中的 yalc 依赖
yalc check
结果类似这样
Yalc dependencies found: [ 'my-button' ]
删除项目中的yalc包
yalc remove you-package
(your-package 表示你yalc全局仓库中存在的包名)
如果你是通过yalc link方式引入的依赖，那么会删除yalc.lock文件以及移除node_modules下的软连接，如果你是通过yalc add方式添加的，那么除了删除yalc.lock文件以及移除node_modules下的软连接外，还会移除package.json中对应的引用
删除yalc仓库中发布的包
- 先查看待删除包的引用情况
yalc installations show your-package, 确保没有项目进行引用 - 再通过
yalc installations clean your-package进行删除(虽然我电脑上无法通过这个命令删除yalc仓库中的包) - 再通过
yalc dir获取yalc仓库的实际目录地址, 再到对应仓库目录中进行删除
npm 包项目检测到文件更新之后，自动打包发版
npm 包项目增加nodemon依赖，用于检测文件的改变，当文件改变时，执行立刻执行编译,打包,重新发布到yalc仓库的逻辑
build命令用于重新编译打包
yalc-publish命令用于调用build命令，并在build命令执行完毕之后，再执行yalc push命令，将打包结果发布到yalc仓库
watch命令用于监控lib目录的js,jsx,ts,tsx,css,less,vue文件变动，当文件变动之后执行pnpm run yalc-publish
package.json
json
{
"scripts": {
"build": "rimraf -rf ./dist && vue-tsc && vite build",
"yalc-publish": "pnpm build && yalc push",
"watch": "nodemon --ignore dist/ --ignore node_modules/ --watch lib/ -C -e js,jsx,ts,tsx,css,less,vue -x pnpm run yalc-publish"
}
}