在 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 包，选择一个包，然后选择 安装包进行安装。

的新 npm 包

ASP.NET 核心项目

对于 ASP.NET 核心项目等项目，可以在项目中添加 npm 支持，并使用 npm 安装包。

注意

对于 ASP.NET 核心项目，还可以使用 库管理器 或 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 节点适用于大多数 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 核心方案中，生成项目后，解决方案资源管理器中的 npm 节点可能不可见。 若要使节点再次可见，请右键单击项目节点，然后选择“卸载项目”。 然后右键单击项目节点，然后选择 重新加载项目。