認識 Node Package Manager (npm)
Node.js 的 Package Manager 稱為 npm,是 Node.js 的官方套件管理工具,提供了一個龐大的套件庫供開發者使用,並且可以透過 npm 安裝、更新、移除套件。所有可供下載的套件都會放在 npm 的官方網站 npmjs.com 上。
當你完成 Node 的安裝 (參考用 NVM 管理 Node.js 版本),npm 也會一併安裝在你的電腦上,你可以透過以下指令來確認 npm 是否已經安裝:
npm -v
如果你看到 npm 的版本號,代表 npm 已經安裝完成。
npm / yarn / pnpm 的差異
在 JavaScript 的開發生態中,你會經常看到一個套件同時提供了 npm、yarn、pnpm 三種安裝方式,這三種套件管理工具有什麼差異呢?
簡單來說,這三種套件管理工具的功能都是一樣的,都是用來安裝、更新、移除套件,且都是存取 npm 官網的套件,但是在效能、安全性、穩定性等方面有所不同:
npm:Node.js 的官方套件管理工具,是最早出現的套件管理工具,但是在安裝套件時會將套件的依賴複製到專案的
node_modules
資料夾中,當專案中有多個套件使用相同的依賴時,會造成硬碟空間的浪費。yarn:由 Facebook (Meta) 開發的套件管理工具,是 npm 的替代品,改善了 npm 的一些缺點,包含並行下載加快安裝速度,複雜專案的套件相依自動處理的穩定性更佳。
pnpm:是目前更主流廣泛使用的套件管理工具,與 npm、yarn 不同的是,pnpm 主打將套件的依賴放在全域的
node_modules
資料夾中,並且使用硬連結的方式來連結到專案的node_modules
資料夾,專案數量增加時可以顯著節省硬碟空間,且可以避免套件的依賴重複安裝,也因此節省大量重新下載重複套件的時間。
功能比較
Feature | pnpm | Yarn | npm |
---|---|---|---|
Workspace support | ✔️ | ✔️ | ✔️ |
Isolated node_modules | ✔️ - The default | ✔️ | ✔️ |
Hoisted node_modules | ✔️ | ✔️ | ✔️ - The default |
Auto installing peers | ✔️ | ❌ | ✔️ |
Plug'n'Play | ✔️ | ✔️ - The default | ❌ |
Zero-Installs | ❌ | ✔️ | ❌ |
Patching dependencies | ✔️ | ✔️ | ❌ |
Managing Node.js versions | ✔️ | ❌ | ❌ |
Has a lockfile | ✔️ - pnpm-lock.yaml | ✔️ - yarn.lock | ✔️ - package-lock.json |
Overrides support | ✔️ | ✔️ - Via resolutions | ✔️ |
Content-addressable storage | ✔️ | ❌ | ❌ |
Dynamic package execution | ✔️ - Via pnpm dlx | ✔️ - Via yarn dlx | ✔️ - Via npx |
Side-effects cache | ✔️ | ❌ | ❌ |
Listing licenses | ✔️ - Via pnpm licenses list | ✔️ - Via a plugin | ❌ |
以上 3 個都是主流的 Node Package Manager,以現今環境來說,pnpm 是目前最推薦的套件管理工具。
如何安裝 pnpm
最簡單的方式,你可以透過 npm 來全域安裝 pnpm:
npm install -g pnpm
這樣就完成了,你可以透過以下指令來確認 pnpm 是否已經安裝:
pnpm -v
常用指令列表
作用 | npm | yarn | pnpm👍 |
---|---|---|---|
安裝 package.json 的所有套件 | npm install | yarn install | pnpm install |
移除套件 | npm uninstall xxx | yarn remove xxx | pnpm remove xxx |
移除套件的簡寫 | npm rm xxx | yarn rm xxx | pnpm rm xxx |
全域安裝套件 | npm i xxx -g | yarn global add xxx | pnpm add -g xxx |
安裝套件(開發跟生產階段都要用) | npm i xxx | yarn add xxx | pnpm add xxx |
安裝套件(僅開發階段使用) | npm i xxx -D | yarn add -D xxx | pnpm add -D xxx |
更新套件 | npm update | yarn upgrade | pnpm update |
全域更新套件 | npm update -g | yarn global upgrade | pnpm update -g |
執行 script | npm run xxx | yarn run xxx | pnpm run xxx |
清除快取 | npm cache clean | yarn cache clean | pnpm store prune |
動態執行套件 | npx xxx | yarn dlx xxx | pnpm dlx xxx |
查看全域安裝的套件 | npm list -g --depth 0 | yarn global list | pnpm list -g |
更新 package manager 自身版本 | npm install -g npm | yarn set version latest | pnpm self-update |