作者 Fimber Elemuwa✏️
在使用 JavaScript 或 Node.js 時，您很可能遇到過 npm，也就是 Node 套件管理器。它是管理套件、安裝依賴項並確保您的專案與其所需的庫保持最新狀態的首選工具。但是 npx 是另一個與 npm 捆綁在一起的工具，它經常引發這樣的問題：兩者之間有什麼區別？
乍一看，npm 和 npx 似乎都可以幫助您與 Node.js 套件交互，但它們的用途不同。在本文中，我們將詳細分析 npm 和 npx 之間的主要區別，向您展示它們的工作原理，並探討何時使用它們。
無論您是在設定新專案、執行腳本，還是只是想知道何時使用 npm 和 npx，本指南都將幫助您了解這兩種工具以及它們如何融入您的開發工作流程。
npm 代表 Node Package Manager，顧名思義，它是一個用於管理 Node.js 套件的工具。每次你的專案需要一個新的「套件」時，你都會求助於 npm 來幫助你安裝它。這些包的範圍可以從小型實用函數到成熟的框架和庫。
但是 npm 不僅僅用於安裝庫。它也非常適合管理專案依賴項和腳本。如果您需要鎖定庫的特定版本以防止重大更改，npm 可以滿足您的需求。它還允許您在 package.json 檔案中定義腳本來自動執行常見任務，例如測試或建置專案。
將 npm 視為軟體元件的數位商店。當您開始一個新的 Node.js 專案時，您將需要各種工具和程式庫來建置它。您可以使用 npm 來取得並安裝這些預先建置的套件，而不是重新發明輪子。它的工作原理是維護一個龐大的線上軟體包註冊表，每個軟體包都有其唯一的名稱和版本。
當您使用 npm install 命令時，npm 會下載指定的套件及其依賴項，並將它們放置在名為 node_modules 的本機目錄中，這是追蹤所有項目依賴項和版本的中心位置。本地安裝意味著該軟體包僅在您安裝它的專案中可用。指令如下圖所示：
npm install <package-name>
例如，如果您想將owsay庫新增到您的專案中，您可以輸入：
npm install cowsay
然後您的專案就可以存取該目錄，從而允許您在程式碼中使用該套件的功能。全域安裝使套件可供整個系統使用，因此您可以將其用於任何專案。這對於您想要從任何地方運行的命令列工具非常有用。
除了簡單的套件安裝之外，npm 還為每個套件提供版本控制，讓您可以指定所需的確切版本。這對於避免新版本中的重大更改引起的潛在問題至關重要。
此外，npm 提供了一種在 package.json 中定義腳本的方法 - 這些命令可以自動執行啟動伺服器、執行測試或建置專案等任務。在 package.json 中，您可以定義以下腳本：
npm install <package-name>
npx 是在 npm v 5.2.0 中引入的。 npm 是關於安裝和管理套件的，而 npx 是關於運行它們的。
將 npx 視為一個快速命令運行程序，可讓您執行 Node.js 套件而無需安裝它們。當您只想使用某個套件一次或對其進行測試而不將其永久添加到系統中時，npx 特別有用。
在 npx 之前，如果您想使用軟體包中的命令列工具，則必須先全域安裝它。 npx 可讓您直接從 npm 註冊表執行該工具，無需全域安裝，從而簡化了此過程。
當您使用 npx 執行命令時，它會先檢查您的本機 node_modules 目錄。如果在那裡找到包，就會執行它。如果沒有，npx 會暫時安裝該包，運行它，然後將其刪除。這意味著您可以使用各種工具，而不會弄亂您的系統。
假設您想要使用 create-react-app 啟動一個新的 React 專案。通常，您必須先全域安裝它：
npm install cowsay
然後，你會運行：
{
"scripts": {
"start": "node index.js",
"test": "jest"
}
}
但使用npx，你可以跳過全域安裝，直接運行：
npm install -g create-react-app
此命令下載 create-react-app，運行它，並在完成後丟棄它。它既快速又方便，可以防止您的系統因可能只使用一次的全域套件而變得混亂。
如果您已經在專案中本機安裝了軟體包，npx 可以幫助您運行它，而無需指定 node_modules 的完整路徑。例如，如果您在本地安裝了 Jest 進行測試，則可以使用 npx 運行它，如下所示：
create-react-app my-app
npx 會自動在本機 node_modules 資料夾中尋找套件並運行它，節省您的時間和麻煩。
我認為 npx 最酷的功能是它能夠確定您正在嘗試執行哪個套件或命令。它遵循一個三步驟過程來決定如何執行任何命令：
注意，預設情況下，npx 將運行軟體包的最新版本，但如果您需要特定版本，您也可以告訴它要運行哪個版本。
npm 和 npx 都是 Node.js 生態系中至關重要的工具，但它們在不同層面上扮演著不同的角色：
| Feature | npm | npx |
| Purpose and functionality | Primarily used for installing packages from the npm registry and managing dependencies in Node.js projects. It helps in adding, removing, and updating packages, and maintaining package versioning | Designed to execute Node packages directly without needing to install them globally. It allows users to run packages without cluttering the global or project-specific `node_modules` |
| Package installation | Installs packages locally or globally | Executes packages temporarily without installing them permanently |
| Temporary usage | Installation with npm persists until explicitly removed. Packages remain in `node_modules` or globally installed paths | Runs packages temporarily and discards them after execution unless otherwise specified |
| Usage | `npm install ` | `npx ` |
| Script setup | Requires modifications to `package.json` to create custom scripts | No modifications needed in `package.json` for running commands |
| Execution of CLI tools | Must install CLI tools globally or locally before using them | Can run CLI tools directly from the npm registry without prior installation |
| Project setup | Typically used for project setup involving multiple dependencies and versions. | Ideal for quick project scaffolding or one-time command execution, like `create-react-app` |
| Node.js compatibility | Bundled with Node.js for general project and package management | Included with Node.js starting from v 8.2.0, streamlining the execution of packages |
決定何時使用 npm 或 npx 取決於任務和項目的需求。
當您需要安裝和管理對開發或生產至關重要的專案依賴項時，您應該使用 npm。由於 npm 確保套件在 package.json 中列出，因此您可以完全控制專案內的版本控制和一致性。它也是運行 package.json 中定義的腳本的首選工具，使其成為建置、測試或執行伺服器等任務的理想選擇。
另一方面，npx 最適合快速、一次性指令或測試工具，無需全域安裝。如果您只想使用工具一次（例如用於引導 React 專案的 create-react-app ），npx 可以讓您直接執行它，而不會弄亂您的系統。它還可以方便地運行本地安裝的軟體包，而無需輸入完整路徑，從而簡化了您的工作流程。簡而言之，使用 npm 進行長期依賴管理，使用 npx 進行臨時任務或動態運行套件。
部署基於節點的 Web 應用程式或網站是最簡單的部分。確保您的 Node 實例繼續為您的應用程式提供資源是事情變得更困難的地方。如果您有興趣確保對後端或第三方服務的請求成功，請嘗試 LogRocket。
LogRocket 就像是網頁應用程式的 DVR，記錄您網站上發生的所有事情。您無需猜測問題發生的原因，而是可以匯總並報告有問題的網路請求，以快速了解根本原因。
LogRocket 為您的應用程式記錄基準效能計時，例如頁面載入時間、第一個位元組的時間、緩慢的網路請求，並記錄 Redux、NgRx 和 Vuex 操作/狀態。開始免費監控。
以上是npm 與 npx：有什麼不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
