NPM 使用指南：如何管理 JavaScript 套件與依賴

更新日期： 2024 年 11 月 7 日

NPM（Node Package Manager）是一個 JavaScript 的套件管理系統，用於安裝、更新和管理專案所需的各種套件（Library）。

NPM 是基於 Node.js 的開發工具，專為 JavaScript 開發者設計，幾乎所有的前端和後端專案都會依賴於 NPM 提供的豐富工具集。

NPM 套件的安裝和管理由 package.json 文件來控制，本文將介紹如何使用 NPM 安裝套件、設置腳本，以及理解套件的版本管理方式。

初始化專案與 package.json

package.json 的重要性

package.json 是 NPM 專案的配置文件，用於儲存專案的名稱、版本、描述，以及所有依賴的套件和腳本指令。

每個 NPM 專案都依賴 package.json 文件來跟蹤專案的依賴關係和設定。

建立 package.json 的兩種方式

1. 手動新增：直接建立 package.json 文件並填入所需內容。
2. 使用 npm init 命令：在專案根目錄下執行以下命令，並按照指引回答相關問題，NPM 會自動生成包含基本配置的 package.json 文件： npm init

這樣會在專案資料夾中生成一個基礎的 package.json 文件，內含專案名稱、版本等基本資訊。

在 package.json 中設置腳本指令

package.json 中的 "scripts" 區塊可以定義多個腳本指令，方便在終端機上執行自動化操作。

例如，將一些開發和運行的常用指令，如編譯、測試或啟動伺服器等，設置在 "scripts" 內。

例子

以下是在 package.json 中設置簡單的腳本指令：

{
  "scripts": {
      "aa": "echo 123",
      "dd": "echo 456"
  }
}

在終端機中執行 npm run dd，會輸出 "echo 456" 指令的結果：

PS C:\Users\User\Desktop\test> npm run dd

> dd
> echo 456

456

這樣可以方便地執行重複的指令，並保持整潔的代碼管理方式。

安裝套件：dependencies 與 node_modules

NPM 使安裝、管理和更新套件變得簡單。

NPM 官網提供了大量開發所需的開源工具，只需在終端機中執行命令即可安裝套件。

以下是安裝套件的範例：

安裝 dayjs 套件

假設我們需要安裝 dayjs 這個日期處理套件，可以使用以下命令：

npm i dayjs

安裝完成後，package.json 中的 dependencies 區塊會自動更新，包含 dayjs 的版本資訊：

{
  "scripts": {},
  "dependencies": {
      "dayjs": "^1.11.13"
  }
}

dependencies 區塊中列出了專案所依賴的所有套件。

此時，專案目錄中也會出現 node_modules 資料夾，其中包含了所有套件的程式碼和相關依賴項。

node_modules 資料夾的作用

node_modules 資料夾是 NPM 用來存放專案所有依賴套件的地方，其中包含：

• 專案直接安裝的套件：例如 dayjs。
• 套件的依賴套件：例如，某些套件可能依賴其他套件來運行，這些依賴項也會一起安裝。

這意味著刪除 node_modules 資料夾並再次執行 npm install 時，NPM 會根據 package.json 重新安裝所有依賴項，並生成相同的 node_modules 結構。

安裝更多套件：例子中的 axios

假設我們進一步安裝 axios 套件來進行 HTTP 請求，可以執行以下命令：

npm i axios

這時 package.json 中的 dependencies 區塊會新增 axios，而且 node_modules 中的資料夾數量會增加，因為 axios 套件可能還依賴其他的內部套件，NPM 會自動下載它所需的所有依賴。

理解套件版本號：major.minor.patch

在 package.json 中，每個套件的版本號都由三個數字組成：major.minor.patch，每個數字表示不同層級的更新：

• major（主版號）：大幅度更新，可能包含重大變更，並不向後相容。
• minor（次版號）：新增功能，通常向後相容。
• patch（修訂版號）：小幅度修正，例如修復 bug，保持完全相容。

舉例來說：

"dependencies": {
    "axios": "^1.7.7"
}

其中 axios 的版本號 1.7.7 表示：

• 1 是主版本，若更新至 2.x.x 可能會有不相容的重大變動。
• 7 是次版本，若更新至 1.8.x 則新增功能，但仍然向後相容。
• 7 是修訂版，若更新至 1.7.8 則表示 bug 修復。

版本控制符號：^、~ 和 > 的作用

在 package.json 中，套件版本號前的符號表示允許的版本更新範圍：

• ^（Caret）：允許次版本（minor）和修訂版本（patch）的更新。例如，^1.7.7 允許升級至 1.8.0 或 1.9.x，但不允許升級至 2.x.x。
• ~（Tilde）：允許僅修訂版本（patch）的更新。例如，~1.7.7 允許升級至 1.7.8 或 1.7.9，但不允許升級至 1.8.x。
• >：允許版本無限制更新，包含 major。例如，>1.7.7 允許升級到任何更新版本，無論是 2.x.x 或 3.x.x。

固定版本與動態更新

不建議使用固定版本，因為如果套件釋出安全性修復更新，專案的固定版本號會導致無法自動更新至修復版，可能會留下安全漏洞。

因此，通常會使用 ^ 或 ~ 來允許安全性的自動更新。

總結

NPM 是一個強大的 JavaScript 套件管理工具，使得專案中的依賴項管理、版本控制和自動化腳本執行更加簡單高效。

了解如何使用 package.json 配置專案、管理套件依賴，以及掌握版本號和控制符號的意義，對於維護和管理現代化 JavaScript 專案至關重要。

通過正確地運用 NPM 的各種功能，我們可以有效地提升開發效率和代碼品質。