前言

npm 或 yarn 這類套件管理工具，基本上可以說是除了 HTML、CSS、JavaScript 以外，必學的東西之一，因為使用第三方套件已經是稀鬆平常的事情，就算不用 React 等框架，也經常會用到像 Day.js 或 lodash 等實用的套件。

這麼實用的東西究竟是怎麼誕生的呢？讓我們以 npm 來討論吧！

先想一下

• npm 是在什麼樣的時代誕生的？
• npm 怎麼解決問題？
• npm 的優缺點是什麼？
• npm 適合什麼情境？

npm 是在什麼樣的時代誕生的？

還記得我最一開始寫的程式碼，那種 Hello World 等級的，沒有引用任何其他套件，每一行都是自己寫，說是「職人手作」也不為過，即便需要一些比較複雜的功能，頂多就是上網 google 之後複製貼上。

不過隨著程式規模愈來愈大，我開始需要套用一些像 jQuery 之類的 library，來幫助我提昇開發效率，這時，我總不可能把整個 jQuery 的原始碼貼到我的資料夾吧！那太累了，但我還是可以用 CDN 的方式，每次讀取 index.html 的時候，透過網路將 jQuery 的 js 檔讀進來用。

然後程式又繼續擴張，我開始寫 React 了，這時的我可能需要好幾個套件協助，比如 react、react-dom、react-hook-form、react-redux 族繁不及備載，面對多個模組時，真要用 CDN 一個一個處理，我應該會先吐血，更別提相依性的問題了。

npm 怎麼解決問題？

npm 是 Node Package Manager，也就是 node 套件管理器，是用 JavaScript 編寫的軟體套件管理系統。

npm 模組儲存庫提供了一個名為「registry」的查詢服務，使用者可通過原生的 npm 命令，下載指定模組到專案中的 node_modules 資料夾中。

講白話來說，使用 npm install react 指令就可以把整套 react 以及其相依的程式碼，全部帶回家，再搭配昨天提到的 Webpack，可以寫出

import React from 'react';

連 node_modules 的路徑都不用，直接指定 import 套件名稱，不但使用簡單，還不用處理相依。

package.json

如果嫌一個一個 npm install XXX 太麻煩，也可以直接把你要安裝的套件寫在 package.json 裡面，執行一次 npm install 即可全部下載，而且如果不同套件相依到同一份 library，也不會下載兩次，在本地快取只會存一份。

install 結束之後，也會儲存一份 package-lock.json 檔案，記錄下這次安裝的每一個套件版號，下次安裝時就可以避免重複下載。

在 package.json 檔案中，開發者可以指定每個 library 的版本範圍，根據 Semantic Versioning 語意化版本指定版號：

Semantic Versioning 語意化版本

版本範例：1.5.3 依次為主版號.次版號.修訂號，版號遞增規則如下：

主版號：當你做了不相容的 API 修改時，數字增加
次版號：當你做了向下相容的功能性新增，數字增加
修訂號：當你做了向下相容的問題修正，數字增加

而指定版本「範圍」的時候，有下列三種可能，比如：

"devDependencies": {
    "eslint": "7.7.0",
    "webpack": "~4.41.2",
    "typescript": "^3.7.5",
   // ...
}

主版號左邊的符號代表的意思如下：

• 7.7.0：指定為 7.7.0 的版本
• ~4.41.2：指定為 >= 4.41.2 且 < 4.42.0 的版本，愈新愈好
• ^3.7.5：指定為 >= 3.7.5 且 < 4.0.0 的版本，愈新愈好

之所以不是固定某個版本，而是指定「範圍」，是因為既可以保證模組自動更新(每次 npm install 的時候)，又不會因為所需模組功能大幅變化導致專案出現問題。當然如果必要，也可以選擇將模組固定在某個版本之上，特別適合需要確保系統穩定的時候。

npm install 的流程

1. 計算缺少的套件：透過現有的 node_modules、package.json、package-lock.json 計算
2. 從 Registry 取得套件資訊：獲取各套件的 package.json，並查詢可用版本
3. 計算差異：整理各套件個別需要下載的版本，避免同版本重複下載
4. 下載、提取真正需要的套件：最耗時的一步，下載、解壓縮、搬到 node_modules
5. 執行每個套件的 install：每個套件都有自己的依賴套件，要透過 install 來安裝

npm 的優缺點是什麼？

優點

套件一次性安裝、管理，版本控管方便

缺點

• npm 沒有稽核機制，除非有人回報，不然仍有可能會下載到低品質，甚至不安全的套件
• node_modules 缺乏良好的管控，容易過於肥大

npm 適合什麼情境？

套件管理工具已經是目前的顯學，基本上只要需要使用第三方的套件，都離不開 npm 或 yarn 等套件管理工具。

但正是因為一定要用，所以 npm 的缺點也很難避免，需要清楚了解。

結語

心智圖放大版

npm 是個讓人又愛又恨的存在，它幫助不少新手渡過難纏的套件相依問題(甚至根本沒意識到有這件事)，讓「安裝套件」變成一件很輕鬆的事情。

但同時，「方便」要用時間與空間來換，耗時的 install 過程與肥大的 node_modules，則是許多老手頻頻搖頭的點，如果未來能夠克服這些點，肯定會大幅提升 DX 的！

參考資料

npm
npm 是什麼？了解 node套件管理工具 npm install