在 Visual Studio 中管理 npm 套件

npm 可讓您安裝和管理套件，以用於 Node.js 和 ASP.NET Core 應用程式。 Visual Studio 可讓您輕鬆地與 npm 互動，並透過 UI 或直接發出 npm 命令。 如果您不熟悉 npm 並想要深入瞭解，請移至 npm 檔。

Visual Studio 與 npm 的整合會根據您的項目類型而有所不同。

• CLI 型專案 （.esproj）
• ASP.NET Core
• 開啟資料夾 （Node.js）

這很重要

npm 預期專案根目錄中 node_modules 資料夾和 package.json 。 如果應用程式的資料夾結構不同，如果您想要使用 Visual Studio 管理 npm 套件，您應該修改資料夾結構。

CLI 型專案 （.esproj）

從 Visual Studio 2022 開始，npm 套件管理員適用於 CLI 型專案，因此您現在可以下載 npm 模組，類似於您下載適用於 ASP.NET Core 專案的 NuGet 套件的方式。 然後您可以使用 package.json 來修改和刪除套件。

若要開啟套件管理員，請從 [方案總管] 以滑鼠右鍵按兩下專案中 的 npm 節點，然後選擇 [ 新增 npm 套件]。

接下來，您可以搜尋 npm 套件、選取一個套件，然後選取 [安裝套件] 來安裝。

ASP.NET 核心專案

針對 ASP.NET Core 專案等專案，您可以在專案中新增 npm 支援，並使用 npm 來安裝套件。

備註

針對 ASP.NET Core 專案，您也可以使用 Library Manager 或 yarn，而不是 npm 來安裝用戶端 JavaScript 和 CSS 檔案。 如果您需要與 MSBuild 整合或 dotnet CLI 進行套件管理，則可能需要下列其中一個選項，npm 未提供。

如果您的專案尚未包含 package.json 檔案，您可以將 package.json 檔案新增至專案，以啟用 npm 支援。

1. 若要新增 package.json 檔案，請以滑鼠右鍵按兩下方案總管中的專案，然後選擇 [ 新增>專案 ] （或按 Ctrl + SHIFT + A）。 使用搜尋方塊尋找 npm 檔案、選擇 [npm 組態檔]、使用預設名稱，然後按兩下 [新增]。

2. 在 dependenciesdevDependencies的或 區段中包含一或多個 npm 套件。 例如，您可以將下列內容新增至 檔案：

   "devDependencies": {
      "gulp": "4.0.2",
      "@types/jquery": "3.5.29"
   }
   

   當您儲存盤案時，Visual Studio 會在 [方案總管] 中的 [ 相依性/ npm ] 節點下新增套件。 如果您沒有看到節點，請以滑鼠右鍵按兩下 package.json 並選擇 [ 還原套件]。 若要檢視套件安裝狀態，請在 [輸出] 視窗中選取 npm 輸出。

   備註

   npm 節點適用於大部分 ASP.NET 核心項目類型，包括 Blazor。 針對MAUI Blazor專案，您必須使用 npm 命令行，因為方案總管中不會有 npm 節點。

   您可以使用 package.json 來設定 npm 套件。 直接開啟 package.json ，或以滑鼠右鍵按下方案總管中的 npm 節點，然後選擇 [ 開啟] package.json。

針對 npm 套件進行疑難解答

• 如果您在建置應用程式或轉譯 TypeScript 程式代碼時看到任何錯誤，請檢查 npm 套件不相容是否為潛在的錯誤來源。 若要協助識別錯誤，請在安裝套件時檢查 npm 輸出視窗，如本文先前所述。 例如，如果一或多個 npm 套件版本已被取代併產生錯誤，您可能需要安裝較新的版本來修正錯誤。 如需使用 package.json 控制 npm 套件版本的相關信息，請參閱 package.json 組態。

• 在某些 ASP.NET 核心案例中，方案總管可能不會顯示已安裝 npm 套件的正確狀態，因為 此處所述的已知問題。 例如，套件可能會在安裝時顯示為未安裝。 在大部分情況下，您可以刪除 package.json、重新啟動Visual Studio，然後重新新增 package.json 檔案，以更新方案總管，如本文稍早所述。 或者，安裝套件時，您可以使用 npm [輸出] 視窗來驗證安裝狀態。

• 在某些 ASP.NET Core 案例中，在建置項目之後，方案總管中的 npm 節點可能無法顯示。 若要讓節點再次顯示，請以滑鼠右鍵按兩下項目節點，然後選擇 [卸除專案]。 然後以滑鼠右鍵按兩下項目節點，然後選擇 [ 重載專案]。