一、簡述
每個公司都有可能有自己的組件庫，我們在開發組件庫時，一般都要將組件庫里的組件應用在自己的項目上，項目與組件庫在本地進行調試就需要一套很好的解決方案。下面我們就對比幾個常見的方案，以及它們存在的問題。
二、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 }。
更多個人文章
