居然有比 npm link 更好的調(diào)試？

在一個(gè)項(xiàng)目中，我們會(huì)用 HRM 熱更新來讓我們修改的代碼在瀏覽器中快速看到效果，快速驗(yàn)證我們的代碼是否正確。

當(dāng)項(xiàng)目開始變大，為了提效、跨項(xiàng)目復(fù)用，我們會(huì)不可避免的需要開始去拆分一些通用的 NPM 模塊。

對(duì)于 NPM 包的調(diào)試方式，傳統(tǒng)的方法是下面這樣子的：

一、直接修改 dependencies

{
  "dependencies": {
    "npm-test": "file:實(shí)際包地址"
  }
}

真正的純手工 ??，上線后還需要時(shí)刻記得修改 dependencies，現(xiàn)在應(yīng)該也沒什么人用這種方法了，不細(xì)講了。

二、npm link

官方文檔^[1]

原理：將調(diào)試的包跟項(xiàng)目中做一個(gè)軟鏈

cd 對(duì)應(yīng)npm包地址
npm link

之后可以在命令行中看到如下日志，則說明 npm 庫(kù)已經(jīng)鏈接到你本地 node_modules 下面了

? Installed 17 packages
? Linked 1 latest versions
? Run 0 scripts
? All packages installed (used 213ms(network 209ms), speed 4.25KB/s, json 1(910B), tarball 0B)
link /Users/beidan/.nvm/versions/node/v14.5.0/lib/node_modules/npm-test@ -> /對(duì)應(yīng)的包實(shí)際地址

之后只需要將項(xiàng)目對(duì)應(yīng)的包鏈到你本地的全局地址即可

cd 項(xiàng)目地址
npm link npm-test

同樣的，我們可以在命令行中看到如下日志，則說明項(xiàng)目中的包也已經(jīng)鏈接成功

link /對(duì)應(yīng)的包實(shí)際地址@ -> /Users/beidan/.nvm/versions/node/v14.5.0/lib/node_modules/npm-test

對(duì)于 Npm link 方式，「因?yàn)?Npm 和 項(xiàng)目屬于不同的項(xiàng)目，它們有自己的 node_modules」,如果組件和應(yīng)用都使用了同一個(gè)依賴，它們會(huì)在各自的 node_modules 去查找，如果這個(gè)依賴不支持多例，應(yīng)用就會(huì)異常。如果 npm 的編譯規(guī)則 和應(yīng)用的編譯規(guī)則不匹配，也同樣會(huì)出問題。如下：

hooks can only be called inside the body of a function component

?

NPM 組件 和你的項(xiàng)目使用了 React Hooks 的情況，React 會(huì)報(bào)致命異常。（原因是 React Hooks 依賴上下文，所以全局只能使用一個(gè)，即使是版本完全一樣的，官方推薦的解決方法 React 錯(cuò)誤提示^[2]）

?

三、更好的調(diào)試方式：yalc

官方文檔^[3]

yalc 將組件的包依賴提升至應(yīng)用中，在全局添加組件依賴，在應(yīng)用下新建文件拉取依賴，即使有共同的依賴也會(huì)從應(yīng)用的 node_modules 去查找。「使用 yalc 可以避免上面 npm link 的依賴問題」

使用起來也非常方便：

npm i yalc -g
yalc publish // 在對(duì)應(yīng)的 npm 包中發(fā)布

yalc link // 在對(duì)應(yīng)的項(xiàng)目中 link 對(duì)應(yīng)的包

四、實(shí)際應(yīng)用

我們期望的工作流程是這樣子的。

在灰色區(qū)域，期望是自動(dòng)化的，而不是寫一下代碼，重新 build 一下, 那自動(dòng)監(jiān)聽更新文件可以用一下 nodemon 。

nodemon 可以來監(jiān)視文件更改并執(zhí)行對(duì)應(yīng)的命令。

nodemon
 --ignore dist/ # 忽略目錄
 --ignore node_modules/
 --watch projects # 觀察目錄
 -C # 只在變更后執(zhí)行，首次啟動(dòng)不執(zhí)行命令
 -e ts,html,less,scss # 監(jiān)控指定后綴名的文件
 --debug # 調(diào)試
 -x "npm run build && yalc push" # 自定義命令

?

可以通過 nodemon -h 查看更多命令

?

結(jié)合 yalc ，我們來重新改造下 npm 包調(diào)試的流程。

一、在 npm 包中增加命令

npm 命令我寫過一篇文章，不了解可以看一下： 你要知道的 Npm Script 都在這里

"scripts": {
    "build": "打包包的命令",
    "async": "npm run build && yalc push",
    "watch": "nodemon --ignore dist/ --ignore node_modules/ --watch src/ -C -e ts,tsx,scss --debug -x 'tnpm run async'", // 自動(dòng)監(jiān)聽
  },

二、項(xiàng)目中

yalc link 包名
npm run start

這樣子，在 npm 包中修改，在項(xiàng)目中可以快速看到結(jié)果，快速驗(yàn)證了，并且不會(huì)出現(xiàn) npm link 中各種奇奇怪怪的問題。

Reference