作為前端開發(fā)者，大家有沒有被 node_modules 困擾過(guò)呢？

反正我是有。。。因?yàn)?npm 特殊的包管理機(jī)制，往往一個(gè)很小的項(xiàng)目就會(huì)攜帶一個(gè)很大的 node_modules 。相信大家都刷到過(guò)下面這張圖，這就是對(duì)前端依賴最大的諷刺了。

有時(shí)候，可能不經(jīng)意間我們就會(huì)引入一個(gè)意外的依賴包，或者不小心升級(jí)了一個(gè)有 break chage 的依賴，還有可能在一個(gè)項(xiàng)目中安裝了多個(gè)互相沖突的依賴版本。但是每次遇到這種問(wèn)題，想要排查問(wèn)題都要花費(fèi)大量時(shí)間。

比如，我們想查詢一個(gè)依賴在項(xiàng)目中的安裝情況，我們可能會(huì)使用 npm ls 命令，但是這個(gè)命令實(shí)在是太慢了，而且打印出來(lái)的信息而且混亂。

或者直接去 lock 里面檢查版本？你可能要花費(fèi)更多的時(shí)間，而且不一定能找全。

qnm

最近在逛 Github? 發(fā)現(xiàn)了一個(gè)寶藏 CLI? 工具：qnm?，它可以幫助我們快速梳理前端依賴信息，并且同時(shí)支持 npm? 和 yarn。

我們可以把它安裝到全局，或者使用 npx 調(diào)用：

npm i --global qnm

分析依賴

用法：qnm [module]?， 我們嘗試查看下所有安裝的 lodash：

這意味著， lodash? 在我們的項(xiàng)目里被安裝了 15? 次，我們項(xiàng)目直接依賴的版本是 4.17.11?，發(fā)布于 3 年前（已經(jīng)很落后了），其他間接依賴的都是 4.17.21 版本，發(fā)布于 1 周前。

我們來(lái)對(duì)比下實(shí)際的 node_modules 目錄，發(fā)現(xiàn)是可以一一對(duì)應(yīng)上的：

再來(lái)對(duì)比下 npm ls lodash 的結(jié)果，相比之下這個(gè)真的很慢而且展示比較亂：

你還可以對(duì)包進(jìn)行模糊搜索（直接在命令行輸入 qnm）：

另外，還有一些參數(shù)選項(xiàng)：

• --no-remote?：禁止從npm 獲取遠(yuǎn)程數(shù)據(jù)，可以加快命令速度；
• -o , --open?：使用默認(rèn)編輯器打開模塊的package.json 文件；
• -d, --debug：查看完整的錯(cuò)誤消息，主要用于調(diào)試；
• --disable-colors：禁用大部分顏色和樣式，例如版本顏色。

分析空間占用

你可以使用 qnm doctor? 分析 node_modules? 目錄中占用最多空間的內(nèi)容，這個(gè)一分析還是挺讓我吃驚的，有的老項(xiàng)目 node_modules 已經(jīng)占用了幾個(gè) G 的空間了。。

調(diào)用 qnm doctor --sort duplicates 查看重復(fù)依賴占用的空間：

分析所有模塊

調(diào)用 qnm list? 命令分析 node_modules? 目錄中所有模塊（等同于直接調(diào)用 npm ls ，但是要比它的速度和可讀性好太多了）。

模糊匹配

qnm match? 命令類似于 grep 命令，可以匹配包含某字符串的任何模塊。

比如我們想查找我們裝了哪些 babel 插件：

怎么樣，有了這個(gè)命令行工具是不是感覺治理 node_modules 要輕松一些了？趕緊收藏起來(lái)吧（https://github.com/ranyitz/qnm）！