组件库本地调试自动化方案
https://www.jianshu.com/p/c079d34eb347
自动化流程 自动化流程通过使用nodemon监听文件修改后，自动执行组件库打包，再使用 yalc push 进行组件库发布，项目只要 yalc add [package] 后，后续就能直接热更新下预览变更了
全局安装nodemon和yalc：
npm install -g yalc // 全局安装
npm install -D nodemon // 组件库安装
# 或
yarn global add yalc
yarn global add nodemon -D打包组件库
本地发布组件库
组件库单独执行 yalc publish 时会把当前组件库下相关文件存储到本地共享的全局存储中，除了不会发布到真实远端仓库外，都和npm真实发包无异。 更好用的是 yalc publish --push 或者简称 yalc push ，它会将你的依赖发布到本地存储库（更新状态），并将所有更改传播到现有通过 yalc 安装的依赖中，下面会用到。 使用 yalc add xxx --link来添加
在组件库的 package.json 中添加 nodemon 脚本命令，这里可以新建一个 nodemon.json 的配置文件去配置详细的信息（具体配置可以去官网查看）。 nodemon 启动监听，当监听文件变化时自动 build 构建，并将库 yalc push 发布到缓存中。
如果当前构建后，package.json 中 private: true 时，直接 yalc push 会报错：Will not publish package with private: true use --private flag to force publishing. 需要使用 yalc push --private 强制发布。
{
"scripts": {
"build": "node scripts/dist.js",
"build:watch": "nodemon --config 'nodemon.json' -x 'npm run build && cd dist && yalc push --private'"
},
}// nodemon.json
{
"restartable": "rs",
"ignore": [
".git",
"node_modules/**/node_modules",
"package.json",
"nodemon.json",
"dist",
],
"verbose": true,
"execMap": {
"js": "node --harmony"
},
"events": {
"restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
},
"watch": ["src"],
"env": {
"NODE_ENV": "development"
},
"ext": "js,json,css,scss,vue"
}业务项目下只要执行 yalc addxxx
在项目根目录下就会自动生成一个 yalc.lock 文件和 .yalc 目录，.yalc 目录类似 node_modules 那样，它存放着从存储库中拉取下来的依赖，yalc.lock 记录当前被替换的组件库版本信息，这些信息用来后面还原依赖包用。
调试完毕,还原现场
调试完毕后，要提交代码部署到公测环境时，执行 yalc remove --all（如果只引了一个依赖包也可直接 yalc remove [package]， yalc remove --all 会将当前所有从 yalc 存储中拉取的都还原），即可一键还原安装包现场， 上面说到的package.json会自动还原了依赖包版本、.yalc、yalc/lock都自动去掉了，还原了开发调试前的现场， 但是node_modules中的对应的组件库也去掉了，所以完成调试后本地只需要重新npm install安装正常版本即可后续开发。
前端组件库本地开发调试的自动化流程实现
https://blog.csdn.net/chenjixue/article/details/136141227
项目中调试本地组件库的实践方案
https://blog.csdn.net/weixin_43552879/article/details/127621284
使用yalc库 yalc是一个非常棒的工具，可以在本地开发和测试包/库，而不用发布到npm。
全局安装
npm install yalc –g
在组件库根目录下执行publish，发布组件库到本地仓库
yalc publish
在开发项目的根目录下执行add，安装该组件库
yalc add 组件库名
修改组件库代码后，推送更新
yalc push
本地调试完成后，在开发项目的根目录下执行remove
yalc remove –all
存在的问题： 修改组件库代码后，需要手动执行yalc push去更新开发项目的node_modules中组件库的代码，页面才会更新。 我们在开发组件库时一般都需要编译打包才能使用，所以在执行yalc push之前还要先执行npm run build进行打包，对于这一套操作yalc没有提供对应的自动化方案。
安装yalc-watch2
npm i yalc-watch2 -D
在package.json文件中添加配置
{
"scripts": {
" yalc-watch2": "yalc-watch2"
},
. . .
"yalcWatch2": {
"watchFolder": "src",
"buildWatchCommand": "tsc --watch",
"extensions": "js,jsx,ts,tsx,png,svg,gif,jpeg,css,less",
"prePushCommand": "npm run build"
}
}启动监听
npm run yalc-watch2
最终实现的效果就是，当我们修改并保存了组件库代码后，会执行npm run build进行组件库的编译打包，然后执行yalc push –changed，开发项目中依赖的组件库代码就会被更新，热更新检测到文件的修改后就会重新编译，然后更新页面，整个过程全部自动化完成，不需要人为操作。
如果我们修改了组件库代码，页面却一直不更新，可能是因为我们使用了webpack的缓存功能，在进行调试时可以先将webpack的缓存功能禁用掉，修改webpack.config.js配置：{ cache: false }。
dev-torun:让组件库+yalc更丝滑简单
相信组件库开发+yalc本地发包已经成为基本操作了，但是一个新的组件开发过程中，会有无数次的修改调试优化，
要么一开始就是在项目里面写代码，但是后面可能迁移的时候就要多费时间 要么直接在组件库里面写，但是不可避免的需要多次构建 这个过程手动去搞的话会很蛋疼，于是就写了dev-torun这个工具来避免脱发，还能尽早下班
配置说明
config.listen_dir：监听目录变化 config.task_delay：延迟时间(秒)执行任务；终端输出倒计时 config.task_cmd：执行任务；当config.listen_dir修改保存后： 当前有任务在执行：等到执行成功后，再次倒计时后执行任务 当前没有任务执行：开始倒计时，然后执行任务 config.task_done：config.task_cmd执行成功的回调函数
使用场景
组件库自动构建build 成功回调后，使用 yalc publish，然后在task_done回调里面在对应项目路径(project_cwd)执行yalc update， 一般情况下项目会重新构建，第一次有问题的话，可能是因为项目启动缓存，可以重启对应项目试试
安装
npm i @zr-lib/dev-torun
使用
确保在项目下已经执行过 yalc link your-package
在组件库根目录新建 dev-torun.config.js
require('@zr-lib/dev-torun/jsTypes/config.types.js');
const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
/** @type {DevToRunConfig} */
module.exports = {
listen_dir: './src/',
task_delay: 5,
task_cmd: npmCmd + ' run build && yalc publish',
task_done: () => {
// console.log(`\n🚀 task_done. ${new Date().toLocaleString()}\n`);
const path = require('path');
const { execSync } = require('child_process');
const project_cwd = path.resolve(__dirname, '../your-project');
// yalc update, (make sure has run 'yalc link your-package')
const updateError = execSync('yalc update --replace', { stdio: 'inherit', cwd: project_cwd });
if (updateError) throw updateError;
else console.log('\n');
}
};添加 npm scripts
{
"scripts": {
"dev-torun": "dev-torun"
}
}如果是全局安装的话，在终端进入组件库路径，直接执行dev-torun即可
npm run dev-torunYalc使用文档
使用场景
1.在组件和插件依赖开发中，项目作为依赖库没办法单独直接运行，需要依赖进别的项目执行，这时候最常用的方式就是npm link 。但用npm link引入的依赖由于资源文件不在项目下，webpack 不会对其做预编译，导致实际构建或者运行时会报错，此时如果直接将文件复制进依赖目录则能正常运行，yalc 能解决此类问题。
2.在一个项目中，我们会用 HRM 热更新来让我们修改的代码在浏览器中快速看到效果，快速验证我们的代码是否正确。
当项目开始变大，为了提效、跨项目复用，我们会不可避免的需要开始去拆分一些通用的 NPM 模块
yalc工作流程图
Yalc
yalc可以在本地将npm包模拟发布，将发布后的资源存放在一个全局存储中。然后可以通过yalc将包添加进需要引用的项目中。
这时候package.json的依赖表中会多出一个file:.yalc/...的依赖包，这就是yalc 创建的特殊引用。同时也会在项目根目录创建一个yalc.lock确保引用资源的一致性。因此，测试完项目还需要执行删除yalc 包的操作，才能正常使用。
整个过程相对于npm link会更加繁琐一些，要经过发包、添加依赖，结束后也需要做清除操作，但也正因此才避免了npm link的一些问题。
安装
NPM:
npm i yalc -g
<p>Yarn:
yarn global add yalc
</p>发布依赖
在所开发的依赖项目下执行发布操作
此时如果存在npm 生命周期脚本：prepublish、prepare、prepublishOnly、prepack、preyalcpublish ，会按此顺序逐一执行。如果存在：postyalcpublish、postpack、publish、postpublish，也会按此顺序逐一执行。
想要完全禁用脚本执行需要使用
yalc publish --no-scripts此时就已经将依赖发布到本地仓库了。
当有新修改的包需要发布时，使用推送命令可以快速的更新所有依赖
yalc publish --push
yalc push // 简写参数:
--changed，快速检查文件是否被更改--replace，强制替换包
添加依赖
进入到项目执行
可以看到项目中添加了yalc.lock文件，package.json对应的包名会有个地址为file:.yalc/开头的项目。
也可以使用
yalc add [my-package@version]将版本锁定，避免因为本地新包推送产生影响。
参数:
--dev，将依赖添加进dependency中--pure，不会影响package.json文件--link，使用link方式引用依赖包，yalc add [my-package] --link--workspace (or -W)，添加依赖到workspace:协议中
更新依赖
yalc update
yalc update [my-package]会根据yalc.lock查找更新所有依赖
移除依赖
yalc remove [my-package]
<p>yalc remove --all // 移除所有依赖并还原
</p>查看仓库信息
当我们要查看本地仓库里存在的包时
yalc installations show要清理不需要的包时
yalc installations clean [my-package]Contributors
Long Mo