現在前端開發基本每天都會用到npm命令，最近在解決安全團隊報告的安全風險時，發現了幾個npm非常實用的命令，特記錄下來...
前言
最近接到公司安全團隊的項目風險表格，列出了當前前端項目的一些安全風險，大概有190多項，第一個大坨是XSS的，第二大坨就是npm包需要升級的，看了下，需要升級的大概有55個包，最近在做這些包升級的時候發現了NPM以前很少用，但是確很實用的幾個命令，特記錄分享
實用命令
npm install package@version
此命令相對其它要介紹的幾個命令應該是使用率算高的，它的功能就是指定安裝特定的版本
先來看一下package.json版本規則符號對比表：
|
符號
|
示例
|
允許的版本範圍
|
核心場景
|
|
無符號
|
|
僅 |
版本敏感，禁止任何更新
|
|
^（插入號）
|
|
1.4.2 → 1.9.9（主版本不變）
|
日常依賴，自動更功能/修復
|
|
~（波浪號）
|
|
1.4.2 → 1.4.9（僅修訂號更新）
|
保守更新，僅接受 bug 修復
|
|
>/<
|
|
1.4.2 → 2.9.9
|
精確控制版本區間
|
|
*（星號）
|
|
1.0.0 → 1.999.999
|
無版本依賴（極少用）
|
|
!（感嘆號）
|
|
1.4.0、1.4.1、1.4.3+（排除 1.4.2）
|
禁止有問題的版本
|
如果你使用普通的npm install package，那它在package.json裏寫入的版本規則是第二項，如項目有lock文件的時候問題不大，但是沒有的時候，你執行npm i，它會在可允許的範圍內主動更新版本，如果你使用npm install package@version，那寫入package.json的版本規則會是第一種，此次安全團隊給出了要更新到的指定版本，所以在此處我選擇的通過npm install package@version來實現安裝指定版本並鎖死版本號
使用示例:
npm install sass@1.94.2npm ls package [--depth=0]
此命令用於查看你當前項目安裝的package版本是多少，它會列出安裝的所有的版本，此處我們以vue包為例，執行如下命令
npm ls vue控制枱會看到如下輸出結果：
從上圖我們還看到部分包後還帶有deduped的灰色字，這個的意思是“去重” 的意思，是 de-duplicated 的縮寫，代表這個包是 “重複依賴被合併後，複用了已安裝的版本”，核心是 npm 優化依賴樹的一種機制，當項目中多個依賴同時需要同一個包（且版本兼容）時，npm 會自動把重複的包合併到依賴樹的更上層（比如根目錄的 node_modules），避免重複安裝。此時在 npm ls 中，被合併的重複包就會標註 deduped，表示 “這個包沒單獨裝，而是複用了其他地方已有的版本”
上面命令還有一個可選參數就是--depth，控制依賴樹的顯示層級，避免默認npm ls輸出過於冗長，用的不多，看二個例子:
- npm ls vue --depth=0 只顯示項目直接依賴（不顯示子依賴）
- npm ls vue --depth=1 顯示直接依賴 + 一級子依賴
npm explain package
精準解釋某個包被安裝的原因（誰依賴它、依賴版本範圍、安裝路徑），解決「明明沒手動安裝，卻出現在node_modules」的困惑，個人感覺這個命令和上面ls有一點相似，都可以查看當前包安裝了什麼版本，哪一個版本被安裝是因為哪一個依賴，我們還是以vue包來例
npm explain vue在命令行看到如下結果：
npm view package [version[s]]
此命令就是查看package包線上可用的版本,分帶versiont和不帶version，version又有分帶不帶s，
- 不帶version,從npm官方倉庫（或當前配置的鏡像源）中查詢vue包的公開信息
- 帶version，並且帶s就是列出所有可用歷史版本
- 帶version，不帶s就是當前最新的穩定可用版本
此處我們還是以vue包為例：
npm view vue控制枱輸出如下：
此命令還可以指定版本號，使用方式是npm view vue@version，就是查看指定版本的公開信息，這個命令給我的感覺就是在命令行中打開vue包的npm簡版詳情頁
npm view vue versions控制枱會看到如下輸出結果：
如果不帶s,控制枱輸出如下：
npm view package[@version] dependencies [--json]
此命令就是上面npm view的另一種用法，它可以查看當前包當指版本的生產依賴和開發依賴，為什麼單提出來説了，因為這個是我這一次用的最多的命令，因為安全團隊給的需要你做升級的包裏，它並不是當前項目的直接依賴，很多都是二級或者三級依賴，如果你要升三級依賴，那你就得去查看祖先級包哪一個版本可以讓你這個依賴升級，單提出來的另一個原因是它還有一個在線web工具
此處我們還是以vue包為例：
npm view vue dependencies --json命令行輸出如下：
它有在線版本：https://npmgraph.js.org/ 使用體驗如下：
一開始我是使用上在命令行查看的，後面發現這個在線的工具後，就使用的都是這個在線的工具了，順便説個題外話，如果同樣的功能可以通過cli來用，也可以通過GUI來用，你通常會選擇哪一個來用了？當然，我是後者，你了？
小結
對於做前端開發的我們基本每天都有在用NPM命令，但是還是有很多好用的功能是沒有發現的，所以我一直都很敬畏技術，就像我寫個人簡歷我覺得我自己掌握了的技術我敢用的二個字就是熟練，從來不敢用精通，因為精通一個東西真的不是那麼容易的
