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

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

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

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

一、直接修改 dependencies

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

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

二、npm link

官方文檔^[1]

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

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

之后可以在命令行中看到如下日志，則說(shuō)明 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

同樣的，我們可以在命令行中看到如下日志，則說(shuō)明項(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è)依賴(lài)，它們會(huì)在各自的 node_modules 去查找，如果這個(gè)依賴(lài)不支持多例，應(yīng)用就會(huì)異常。如果 npm 的編譯規(guī)則 和應(yīng)用的編譯規(guī)則不匹配，也同樣會(huì)出問(wèn)題。如下：

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

?

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

?

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

官方文檔^[3]

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

使用起來(lái)也非常方便：

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)化的，而不是寫(xiě)一下代碼，重新 build 一下, 那自動(dòng)監(jiān)聽(tīng)更新文件可以用一下 nodemon 。

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

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

?

可以通過(guò) nodemon -h 查看更多命令

?

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

一、在 npm 包中增加命令

npm 命令我寫(xiě)過(guò)一篇文章，不了解可以看一下：?你要知道的 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)聽(tīng)
??},

二、項(xiàng)目中

yalc?link?包名
npm?run?start

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

Reference