在 Visual Studio 中管理 npm 包

可以使用 npm 来安装和管理要在 Node.js 和 ASP.NET Core 应用程序中使用的包。 使用 Visual Studio 可轻松地通过 UI 或直接与 npm 交互并发出 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 的项目，因此现在可以采用为 ASP.NET Core 项目下载 NuGet 包的方式下载 npm 模块。 然后可以使用 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”输出。

   可以使用 package.json 配置 npm 包。 直接打开 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 节点可能不可见。 若要使节点再次可见，请右键单击项目节点，然后选择“卸载项目”。然后右键单击项目节点，并选择“重新加载项目”。