[譯] 如何更新 package.json 中的依賴項

原文：medium.com/better-prog…

Npm (Node Package Manager) 是一種應用於 JavaScript 編程語言的包管理器，也是 Node.js 的 JavaScript 運行時環境的默認包管理器。

在一個項目中，其包依賴項列表保存在 package.json 文件中。每一個已安裝的包都被分配了一個版本號，通常由 三部分組成：major.minor.patch 。

• major 表示非兼容的重大 API 改變
• minor 表示向後兼容的功能性改變
• patch 表示向後兼容的 bug 修正

默認狀況下，npm 會安裝最新的版本，並在版本號前面附加一個 ^ 插入符號，如 「^15.2.0」。有這種插入符號的依賴項意味着至少要安裝 15.2.0 的版本。

當存在一個更高的 major 版本時，它就可能被使用。比方說當時有了個 15.6.2，就會在安裝時升級到該版本。

若你想更穩妥些，使用 ~ 波浪號 的 「~15.2.0」 以表示只使用 patch 位更高的版本。固然，純 「15.2.0」 將保證只使用該精確的版本號。語義化版本命名法的更多細節見 semver.org/ 。

迄今爲止，一切順利。

問題來了

斗轉星移，依賴愈增。當你想升級全部包以獲取新特性或是修正缺陷時，你會如何作呢？

首先你得肯定最新版本是多少。這裏有個 GitHub 上的例子：

{
  "name": "npm_upgrading",
  "version": "1.0.0",
  "description": "A tutorial how to upgrade NPM packages",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JenniferFuBook/npm_upgrading.git"
  },
  "author": "Jennifer Fu",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/JenniferFuBook/npm_upgrading/issues"
  },
  "homepage": "https://github.com/JenniferFuBook/npm_upgrading#readme",
  "dependencies": {
    "lodash": "~4.17.12",
    "prettier": "1.18.0",
    "react": "^15.2.0"
  }
}
複製代碼

若是你在 VSCode 上安裝過 「Version Lens」 的話，它將展現全部包的最新版本：

或者也可使用 npm 命令行接口：npm outdated

• Current 即當前被安裝的版本
• Wanted 是知足 package.json 中的 SemVer 範圍的最大版本
• Latest 是該包在倉庫中標記爲 latest 的版本
• Location 是該包在所居於的依賴樹中所在的位置

CLI 輸出中的包顏色表示了過時等級。紅色意味着匹配到了一個比 package.json 中定義的 SemVer 需求還要新的已安裝版本；黃色表示倉庫中有比 SemVer 需求更新的版本。

在上例中，lodash 並未過時，所以沒有被列出。同時，Prettier 在 minor 位落後於最新版本了，而 React 是在 major 位。

若是依賴項被修改成這樣：

紅色標記將會凸顯 Lodash 和 Prettier：

解決之道

在找出過時包以後，咱們修正 package.json 中相關的版本規格。然後能夠運行 npm install 或 npm update 以升級。

• npm install 會安裝一個包及其依賴的任何包。若是該包中存在 package-lock 或 shrinkwrap 文件（在並存時後者優先級更高），將會按其進行依賴項安裝。
• npm update 會更新依賴項列表中出現的全部包，同時也會安裝缺失的包。

兩者的區別是什麼呢？

首先，若是已安裝的包版本知足 package.json 中定義的 SemVer 規格，則 npm install 會以模糊版本策略忽略掉它，並不會從新安裝；而 npm update 則仍會（譯註：在符合 SemVer 規格的前提下）將其升級到對應的最新 latest 版本。

譯註：好比成文時 lodash 庫的最新版本是 4.17.15，假設已安裝版本爲 4.17.14，則運行 npm install 後不會有任何變化，而 npm update 會將其升級到 4.17.15。

同時，對 devDependencies 的處理也是不一樣的：

• npm install 會安裝或升級 devDependencies ，除非添加了 --production 標記
• npm update 會忽略 devDependencies ，除非添加了 --dev 標記

太概念化了是吧？來舉個例子，咱們把 Prettier 的版本從 「1.18.0」 改爲 「~1.18.0」：

若是運行 npm install，Prettier 的版本就是足夠「模糊」的，以至 package-lock.json 中會保留原來的 「1.18.0」：

運行 npm ls 也能看到：

然而運行 npm update 後，package-lock.json 中 Prettier 的版本則會升級到 「1.8.2」：

npm ls 的輸出一樣也更新了：

此外，Prettier 的波浪號式依賴也被改成插入號式了！

更優方案

如前所述，若是 SemVer 規格使用了波浪號式版本聲明，即使是 npm update 也不會直接升級其 major 位版本號。在主版本變更頻繁並帶來破壞性改變的情形下，這種 update 策略是頗有意義的，同時須要謹慎對待。

那麼，若是就是想升級 major 版本該如何呢？

使用 VSCode 中的 Version Lens 插件時，咱們能夠據其提示手動更新依賴包的 major 版本。另一個強大的工具是 npm-check-updates，會自動化地完成一樣的工做；該 npm 工具能夠被全局化安裝：

npm install -g npm-check-updates

而後運行：ncu -u

如今，package.json 中的依賴項就被升級到最新了，包括 major 位的更新：

剩下的就簡單了。運行 npm install 或 npm update 以完成升級。

謹慎使用 npm-check-updates -- 畢竟，能力越大責任越大。

--End--

查看更多前端好文
請搜索 fewelife 關注公衆號

轉載請註明出處