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

Question

我有一个简单的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以及其他文件。

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

Answer 1

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

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

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

请注意，*适用于最新版本。不建议这样做。最好指定所需的版本。您会注意到，您支持对版本和软件包名称的intellisence。

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

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

Answer 2

为避免手动导航到正确的目录，请使用＆＃34;打开命令行＆＃34; Mads Kristensen的延伸。它在市场上免费提供。你找到它here。

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

Tipp：使用键盘快捷键ALT + Space代替上下文菜单打开命令提示符。

然后您可以运行npm命令：

npm install react-bootstrap-typeahead

作为旁注：从npm 5.0.0开始，默认情况下，已安装的模块作为依赖项添加，因此不再需要--save选项。

Answer 3

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

Answer 4

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

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

Answer 5

我使用一种不同的方法，根据SOLUTION（而不是按PROJECT）配置npm。
请参考我的博客：

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

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