管理 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 套件、選取一個套件，然後選取 [安裝套件] 來加以安裝。

ASP.NET Core 專案

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

注意

針對 ASP.NET Core 專案，您也可以使用程式庫管理員或 yarn，而不是 npm 來安裝用戶端 JavaScript 和 CSS 檔案。 如果您需要與 MSBuild 或 dotnet CLI 整合以進行套件管理（npm 未提供），則可能需要使用這些選項之一。

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

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

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

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

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

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

針對 npm 套件進行疑難排解

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

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

• 在某些 ASP.NET Core 場景中，建置專案後，解決方案資源管理器中的 npm 節點可能不可見。 若要讓節點再次顯示，請以滑鼠右鍵按一下專案節點，然後選擇 [卸載專案]。然後以滑鼠右鍵按一下專案節點，並選擇 [重新載入專案]。