logo标签列表

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

asp.netvisual-studionpmasp.net-corevisual-studio-2017
39

我有一个简单的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配置的工作原理，并在此处查找您已经安装的包。(我本可以提供更好的答案，但我已经忘记了具体细节，因为我放弃了JS包世界中错综复杂的依赖关系，几乎每个包都由庞大的依赖关系构成。但我确实记得，在我正确地处理所有事情之前，需要对npm配置进行相当多的研究。) - McGuireV10
哎呀，我以为你是在安装后尝试找到它。无论如何，配置npm应该能为你澄清一切。它确实有全局和本地包的概念，你需要考虑一下。 - McGuireV10
你能运行 cd && npm root 并将输出粘贴在这里吗？ - Alexey Andrushkevich
@AlexeyAndrushkevich 输出：PM> npm root C:\Users\LarsHoldgaard\node_modules - Lars Holdgaard
1
我认为问题在于您试图从“包管理器控制台”运行npm。通过按Win-R打开常规命令行应用程序，然后键入“cmd”命令来打开终端窗口。然后在终端窗口中导航到您的项目，然后像您上面所述那样运行“npm install”命令。 - Alexey Andrushkevich
7个回答
38

为了避免手动导航到正确的目录，请使用 Mads Kristensen 的“Open Command Line”扩展。它可以在 Marketplace 免费获取。您可以在这里找到它。

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

enter image description here

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

然后，您就可以运行 npm 命令：

npm install react-bootstrap-typeahead

顺带一提：自npm 5.0.0以来，默认情况下会将已安装的模块添加为依赖项，因此不再需要--save选项。

更新2019年：

Developer Command Prompt和Developer Power Shell现在已集成到Visual Studio 2019（16.2 Preview 2）中-不再需要扩展程序。

您可以在工具/命令行下找到它们。

默认情况下未分配任何快捷方式-因此您必须自己完成此操作。

输入图像描述

这并不是非常重要或相关的，但你是否曾经在Windows中使用过Alt+Space的实际功能？当窗口卡在一个非常奇怪的位置，你无法抓住角落时，它是唯一能够轻松恢复的东西。更好的是，窗口位置有时会在关闭和重新打开应用程序后保持不变。所以...也许Alt+Space应该只作为Windows快捷方式留下来？ - David T. Macknet
24

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

在项目根目录下创建一个package.json文件（右键单击项目，选择添加项并搜索NPM，即可找到npm配置文件）：

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

请注意，*代表最新版本，这不是推荐的做法。最好指定您需要的版本。您将注意到，您可以通过版本和软件包名称获得智能提示支持。

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

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

智能感知对我不起作用。有什么办法可以启用它吗？ - Tigerware
11
你可以使用“包管理器控制台”运行npm命令。
要打开“包管理器控制台”，请转到“工具”>“NuGet程序包管理器”，选择“包管理器控制台”，然后输入您的npm命令。

enter image description here

enter image description here

更新：

自 Visual Studio 16.8.3 起，您将会发现终端已经内置到 Visual Studio 中。

您可以通过右键单击您的解决方案或使用快捷键 Ctrl + ` 来找到它： 输入图片描述

enter image description here

1
我遇到了一个错误：“未将 'npm' 识别为 cmdlet、函数、脚本文件或可操作的程序的名称...” - Jeremy
5
@Jeremy出现问题是因为你没有安装NPM。点击这里安装nodejs+npm，然后你就能看到命令运行了。 - Yew Hong Tat
2
NPM已经安装在“C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Microsoft\VisualStudio\NodeJs”中。你不是说我们需要安装两个独立的NodeJS副本吧？ - AlexPi
并非每个安装都会默认安装nodejs。这取决于您在安装过程中选择的选项。如果您已经在Visual Studio文件夹中安装了nodejs，但仍无法正常工作，您只需设置环境路径指向nodejs文件夹即可。 - Yew Hong Tat
1
@Yew Hong Tat - 这样安全吗？ :-) 说真的，我看到7个node.exe的版本散布在\Program Files*下面。VS 17愉快地安装了NodeJs工作负载，从未抱怨缺少nodejs。甚至创建了一个新项目，然后抱怨 :-)) 独立安装带来了Python v2.7.17 - 它根本没有考虑3.6在这台机器上。并且在VS下复制了3个cmd链接（本地和交叉工具），"Node.js Tools"在工具下不存在，你的建议是“只需添加到路径”？ :-) 与Python集成的顺畅程度相比（工具子菜单、环境（一种沙盒）...）。 - ZXX
1
修改路径变量后，请务必重新启动VS。 - MikeH
8

补充一下我的看法，时间是2021年。

Visual Studio自带npm支持，不需要使用CLI。VS可以在后台自动安装和还原包 - 在打开项目时和/或在对packages.json文件进行更改后。你可以在这里启用此功能：

enter image description here

例如，这是一个关于如何配置通过npm工具自动进行js/css文件的压缩和编译的文章，只使用裸的Visual Studio即可（免责声明：我去年写了那篇博客文章）。

这很简单。我对这个node和npm的东西都很陌生，所有的内容都超出了我的理解范围... 这节省了我的一天。 - Rajshekar Reddy
6
  • 在Windows资源管理器中导航到项目中的package.json文件所在的位置。
  • 在与package.json文件相同的目录中创建一个名为node_modules的文件夹。
  • 同时按住左侧[Shift]键，在包含project.json文件的文件夹中右键单击。
  • 从上下文菜单中选择“在此处打开命令窗口”。
  • 输入您的npm命令npm install --save react-bootstrap-typeahead
有没有任何反馈告诉我为什么这个答案被踩了？ - AperioOculus
4
我使用一种不同的方法，根据解决方案而不是项目来配置 npm。
请参考我的博客：使用 npm（和 Gulp）更好地使用 Visual Studio
它可以很好地工作，您可以使用命令行或包管理器控制台来安装/更新/卸载 npm 包。 我目前在 Visual Studio 2019 和 ASP.NET Core MVC 中使用它。
2

如果您在使用Visual Studio时同时使用外部控制台，那么您可能正在做一些错误的事情 - 项目的开发过程应该是全部使用内置工具或全部使用外部工具。

Visual Studio拥有各种集成的包管理工具。让我们从愉快的路径开始：安装前端库。

Adding a front-end library - happy path

从这里开始，您可以选择提供程序，并开始输入以查找您要查找的软件包。安装后，文件将准备好被拖放到您的(cs)html文件中以便轻松使用。

这是此功能的完整文档。

现在，原始帖子请求解决NPM依赖项的问题；理想情况下，您希望尝试使用上述第一个过程之一从标准提供程序之一中获取它，但有时您要查找的NPM软件包不由任何这些提供程序提供。在这种情况下，请按照此处的说明在项目根目录中创建package.json文件。这将安装软件包到标准node_modules文件夹中 - Visual Studio将识别该文件夹，并在“依赖项”下显示为依赖项。此时，您现在可以按照上述第一个过程的步骤，选择文件系统提供程序，在库文本框中键入node_modules/，然后您应该能够找到并安装刚刚安装到标准wwwroot/lib文件夹位置的NPM软件包。

Moving NPM packages to a more usable location

这些图片对答案真的必要吗？您的答案对于无法加载或查看图像的用户可访问吗？这些图片可以缩小吗？ - miken32
3
我不同意，这些图片提供了一个很好的概述。 - Kebechet
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接