本地调试npm私有包使用yalc + nodemon

本地开发插件痛点不想频繁发布，常用的方式就是使用npm link，但是开发中出现各种问题，由此找了一种新的方式开发插件 yalc + nodemon 意外的还挺好用

Yalc 前端link工具

作用 yalc 可以在本地将npm包模拟发布，将组件的包依赖提升至应用中，发布后的资源存放在一个全局存储中。然后通过yalc将包添加进需要引用的项目中，在应用下新建文件拉取依赖
安装

npm i yalc -g

使用（包项目中）

yalc publish --push
yalc push // 以上可以简写为该命令

这两条命令意思都是发布且推送，如果本地代码对比发现发布的包实际上并未更新，可以使用相关参数调试

参数：
     --changed  检查文件更改
     --replace  强制替换包
     --dev      将依赖添加进`dependency`中
     --pure     不会影响`package.json`文件
     --link     使用`link`方式引用依赖包，`yalc add 包名 --link`
     --workspace (or -W)    添加依赖到workspace:协议中

使用（使用包的项目）

 yalc add  包名

执行完该命令，可以发现项目根目录中自动生成了1yalc.lock文件， package.json对应的包名的引用地址为file:.yalc/xxx, 且本地生成了一个.yalc文件目录，这也就是你的yalc引用的包文件了

yalc 相关指令（部分）

 yalc update 包名           // 更新包
 yalc remove 包名           // 删除包
 yalc remove --all          // 移除所有依赖并还原
 yalc installations show    // 查看本地仓库里存在的包
 yalc installations clean   // 清理不需要的包
 yalc publish --no-scripts  // 发布包完全禁用脚本执行

注意点

测试完项目需要执行删除yalc包的操作，才能恢复正常使用发布到线上的包

nodemon 文件监控开源库

安装

npm i -g nodemon

使用

    --ignore xx/       // 忽略目录xx/
    --watch xx/        // 观察目录xx/
    -C                 // 只在变更后执行，首次启动不执行命令
    -e vue,scss        // 监控指定后缀名的文件
    --debug            // 调试
    -x  命令（ 例子：npm run build && yalc push） // 自定义执行命令

若还需要了解更多请使用 nodemon -h 自行查看更多相关使用方法

配置包项目的package.json

在此贴上自己使用的命令仅供参考

包项目

使用包项目
- 踩坑请仔细检查自己的包是否正确更新，如果使用包的项目开发运行中没有更新，或许是项目运行缓存问题，比如我使用的vite的热更新是没有对该项目中的.yalc目录中的改变做到实时更新的，自行处理一下就好了