如何在 Visual Studio 2017 中使用 NPM 并安装包？答案

【问题标题】：How to use NPM and install packages inside Visual Studio 2017?如何在 Visual Studio 2017 中使用 NPM 并安装包？
【发布时间】：2018-08-18 20:51:33
【问题描述】：

我有一个简单的 Visual Studio 解决方案，运行 ASP.NET Core v2 并构建一个 React 应用程序。

现在，我想使用 NPM 安装一个简单的组件。在这个特定的例子中，它可能是：

npm install --save react-bootstrap-typeahead

我希望这个包只在我的解决方案中工作，而不是其他地方。

我的结果：

当我运行它时，我得到以下很好的错误，这显然是有道理的。如果 NPM 认为它可以在 'C:\Users\LarsHoldgaard\package.json' 找到我的项目文件，那就不走运了。正确的路径是C:\Users\LarsHoldgaard\Documents\Github\Likvido.CreditRisk\Likvido.CreditRisk\Likvido.CreditRisk。

npm : npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\LarsHoldgaard\package.json'
At line:1 char:1
+ npm install --save react-bootstrap-typeahead
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (npm WARN saveEr...d\package.json':String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError

npm

WARN

enoent
 ENOENT: no such file or directory, open 'C:\Users\LarsHoldgaard\package.json'

npm

WARN
 grunt-sass@2.0.0 requires a peer of grunt@>=0.4.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-rating@1.0.6 requires a peer of react@>=0.13.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-bootstrap-typeahead@2.5.1 requires a peer of react@^0.14.0 || ^15.2.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-bootstrap-typeahead@2.5.1 requires a peer of react-dom@^0.14.0 || ^15.2.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 prop-types-extra@1.0.1 requires a peer of react@>=0.14.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-overlays@0.8.3 requires a peer of react@^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-overlays@0.8.3 requires a peer of react-dom@^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-onclickoutside@6.7.1 requires a peer of react@^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-onclickoutside@6.7.1 requires a peer of react-dom@^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-transition-group@2.2.1 requires a peer of react@>=15.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 react-transition-group@2.2.1 requires a peer of react-dom@>=15.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 LarsHoldgaard No description

npm

WARN
 LarsHoldgaard No repository field.

npm

WARN
 LarsHoldgaard No README data

npm

WARN
 LarsHoldgaard No license field.

我的想法：

作为一个控制台菜鸟，我想我只需要更改我当前的文件夹。但如果我运行dir，我在正确的文件夹中，我可以看到我的package.json 以及其他文件。

安装组件的正确方法是什么？

【问题讨论】：

它正在尝试使用默认的包位置。查看 npm config 的工作原理，并查看 here 以找到您已经安装的包。（我会提供一个更好的答案，但我忘记了细节，在看到几乎构成每个包的庞大庞大依赖项之后，我放弃了 JS 包世界的混乱局面。但我确实记得 npm config在一切正常之前进行了相当多的研究。）
糟糕，您以为您在安装后试图找到它。好吧，无论如何，配置 npm 应该为您澄清一切。它确实具有您需要考虑的全局和本地包的概念。
你能运行cd && npm root 并将输出粘贴到这里吗？
@AlexeyAndrushkevich 输出：PM> npm root C:\Users\LarsHoldgaard\node_modules
我认为问题在于您试图从Package Manager Console 运行npm。按 Win-R 打开常规命令行应用程序并输入cmd 命令。然后在终端窗口中导航到您的项目，然后如上所述运行npm install 命令。

标签： asp.net visual-studio npm asp.net-core visual-studio-2017

【解决方案1】：

加上我从 2021 年开始的 2 美分。

Visual Studio 带有内置的 npm 支持，无需 CLI。 VS 可以在后台自动安装/恢复包 - 在项目打开和/或更改 packages.json 文件之后。您可以在此处启用此功能：

例如，这里的 an article 是关于通过 npm 工具配置自动缩小和编译 js/css 文件，只使用裸 Visual Studio（免责声明：我去年自己写了那篇博文）

【讨论】：

【解决方案2】：

您可以使用包管理器控制台运行 npm 命令。

要打开包管理器控制台，请转到工具 > Nuget 包管理器并选择包管理器控制台，然后输入您的 npm 命令。

更新：

最新的visual studio 16.8.3以后，你会发现visual studio内置的终端。

您可以通过右键单击您的解决方案或快捷方式Ctrl + ` 找到它：

【讨论】：

我收到一条错误消息“术语 'npm' 未被识别为 cmdlet、函数、脚本文件或可运行程序的名称...”
@Jeremy 显示该问题是因为您尚未安装 NPM。点击here安装nodejs+npm，你会看到命令运行。
NPM 已经安装在“C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Microsoft\VisualStudio\NodeJs”。您肯定不是说我们需要安装 2 个单独的 NodeJS 副本吗？
不是每个安装都会默认安装nodejs。这取决于您在安装过程中选择的选项。如果你的 Visual Studio 文件夹中安装了 nodejs，但它仍然无法正常工作，你只需将环境路径设置为指向 nodejs 文件夹即可。
@Yew Hong Tat - 安全吗？：-）严重地。我在 \Program Files* 下看到了 node.exe 的 7 个化身：-)。 VS 17 愉快地安装了 NodeJs 工作负载，从不抱怨缺少 nodejs。甚至创建了一个新项目然后抱怨 :-)) 独立安装带来了 python v2.7.17 - 没有看到盒子上的所有 3.6。并在 VS（本机和跨工具）下复制了 3 个 cmd 链接，“Node.js 工具”在“工具”下不存在，您的建议是“只需添加到路径”？ :-) 与 Python 集成的流畅程度相比（工具子菜单、环境（沙箱类型）...）。

【解决方案3】：

我使用不同的方法，按解决方案而不是按项目配置 npm。
请参考我的BLOG：

A better way to use Visual Studio with npm ( and Gulp )

它工作正常，您可以使用命令行或包管理器控制台来安装/更新/卸载 npm 包。我目前正在将它与 Visual Studio 2019 和 ASP.NET Core MVC 一起使用。

【讨论】：

【解决方案4】：

为避免手动导航到正确的目录，请使用 Mads Kristensen 的“打开命令行”扩展程序。它在市场上免费提供。你找到它here。

安装后，您可以直接从 Visual Studio 中方便地打开命令提示符。

提示：使用键盘快捷键 ALT+Space 而不是上下文菜单来打开命令提示符。

然后你可以运行你的 npm 命令：

npm install react-bootstrap-typeahead

附带说明：从 npm 5.0.0 开始，已安装的模块默认添加为依赖项，因此不再需要 --save 选项。

2019 年更新：

开发人员命令提示符和开发人员 Power Shell 现在已集成到 Visual Studio 2019（16.2 预览版 2）中 - 不再需要扩展。

您可以在Tools/Command Line 下找到它们

默认情况下没有分配快捷方式 - 所以你必须自己做。

【讨论】：

实际上并不是非常重要或相关，但您是否曾经在 Windows 中使用Alt+Space 来实际执行它的功能？当窗户卡在一个非常奇怪的位置并且您无法抓住角落时，这是唯一可以轻松恢复的东西。更好的是，窗口位置有时在关闭和重新打开应用程序后仍然存在。那么...Alt+Space 或许应该留作 Windows 快捷方式？

【解决方案5】：

我认为最简单的方法是使用 Visual Studio 提供的 UI。

在您的项目的根目录中创建一个package.json（这样做，右键单击您的项目，添加项目并搜索NPM。您将找到一个npm Configuration File）：

{
  "name": "SomeName",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "react-bootstrap-typeahead": "*"
  }
}

请注意，* 是最新版本。不建议这样做。最好指定您想要的版本。您会注意到，您支持版本和包名称的智能。

每次更改 json 文件时，只需按 CTRL + S。 Visual Studio 会自动调用 NPM 并恢复包。

关于如何使用命令行，其他已经回答了。但作为一个命令行菜鸟，我更喜欢这种方式。

【讨论】：

智能感知对我不起作用。任何想法如何启用它？

【解决方案6】：

在 Window 的资源管理器中，导航到 package.json 文件在您的项目中所在的位置。
在与您的package.json 文件相同的目录中创建一个名为node_modules 的文件夹
按住左[Shift] 键的同时，右键单击包含project.json 文件的文件夹。
从上下文菜单中选择“在此处打开命令窗口”。
输入你的 npm 命令npm install --save react-bootstrap-typeahead

【讨论】：

关于为什么这个答案被否决的任何反馈？