项目中调试本地组件库的实践方案
一、简述
每个公司都有可能有自己的组件库，我们在开发组件库时，一般都要将组件库里的组件应用在自己的项目上，项目与组件库在本地进行调试就需要一套很好的解决方案。下面我们就对比几个常见的方案，以及它们存在的问题。
二、npm link
项目中进行组件库调试，首先想到的就是使用npm link方案。
在组件库的根目录执行
npm link
在开发项目的根目录执行
npm link 组件库名
它会在开发项目的node_modules文件夹中创建一个指向组件库的软链接。
- 存在的问题：
- 每次修改并保存代码后要都要手动执行一遍npm run build和npm link。
-
大多数情况下会出现下面的报错
原因 1: React 和 React DOM 的版本不一样的问题
原因 2: 可能打破了 Hooks 的规则
原因 3: 在同一个项目中使用了多个版本的 React
三、使用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与yalc-watch配合
yalc-watch是一个专门为实现监听组件库代码修改然后自动执行yalc push的库，它是一个很小的命令行工具。
安装
npm i yalc-watch -D
在package.json文件中添加配置
{
"scripts": {
" yalc-watch": "yalc-watch"
},
. . .
"yalcWatch": {
"watchFolder": "build",
"buildWatchCommand": "tsc --watch",
"extensions": "js, png,svg,gif,jpeg,css",
}
}
启动监听
npm run yalc-watch
-
存在的问题：
修改并保存组件库代码后它会立即执行yalc push，而我们的需求是在这之前要先执行npm run build，将组件库编译打包，而这个库满足不了我们的需求，该库也很长时间没人维护了。
五、yalc与yalc-watch2配合
没有库能解决我们的需求，那我就自己写了个库，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 }。
更多个人文章
