wake-up-neo.net

Wie verwende ich NPM und installiere Pakete in Visual Studio 2017?

Ich habe eine einfache Visual Studio-Lösung, die ASP.NET Core v2 ausführt und eine React-App erstellt.

Nun möchte ich eine einfache Komponente mit dem NPM installieren. In diesem speziellen Beispiel könnte es sein:

npm install --save react-bootstrap-typeahead

Ich möchte, dass dieses Paket nur in meiner Lösung funktioniert und an keiner anderen Stelle.

Mein Ergebnis:

Wenn ich das ausführen, erhalte ich den folgenden Nice-Fehler, der offensichtlich einen Sinn ergibt. Wenn NPM glaubt, meine Projektdatei unter 'C:\Users\LarsHoldgaard\package.json' finden zu können, ist dies kein Glück. Der richtige Pfad wäre 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
 [email protected] requires a peer of [email protected]>=0.4.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]>=0.13.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]^0.14.0 || ^15.2.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]^0.14.0 || ^15.2.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]>=0.14.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected].1 requires a peer of [email protected]>=15.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of [email protected]>=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.

Ich denke:

Als console noob hätte ich gedacht, ich müsste nur meinen aktuellen Ordner ändern. Wenn ich jedoch dir starte, bin ich im richtigen Ordner, und ich kann meinen package.json zusammen mit anderen Dateien sehen.

Was ist der richtige Weg, um Komponenten zu installieren?

asp.netvisual-studionpmasp.net-corevisual-studio-2017
8
Lars Holdgaard

Um zu vermeiden, manuell zum richtigen Verzeichnis zu navigieren, verwenden Sie die Erweiterung "Open Command Line" von Mads Kristensen. Es ist kostenlos im Marketplace erhältlich. Sie finden es hier .

Nach der Installation können Sie eine Eingabeaufforderung bequem in Visual Studio öffnen.

 enter image description here

Tipp: Verwenden Sie die Tastenkombination ALT + Leertaste anstelle des Kontextmenüs, um die Eingabeaufforderung zu öffnen.

Sie können dann Ihren npm-Befehl ausführen:

npm install react-bootstrap-typeahead

Als Randbemerkung: Ab npm 5.0.0 werden installierte Module standardmäßig als Abhängigkeit hinzugefügt, sodass die Option --save nicht mehr erforderlich ist.

9
Postlagerkarte

Ich denke, der einfachste Weg ist die einfache Verwendung der Benutzeroberfläche, die Visual Studio bietet.

Erstellen Sie im Stammverzeichnis Ihres Projekts einen package.json (Klicken Sie dazu mit der rechten Maustaste auf Ihr Projekt, fügen Sie ein Element hinzu und suchen Sie nach NPM. Sie finden einen npm Configuration File):

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

Beachten Sie, dass * für die neueste Version steht. Dies wird nicht empfohlen. Geben Sie besser die gewünschte Version an. Sie werden feststellen, dass Sie Unterstützung für Intellisence für Versionen und Paketnamen haben.

Jedes Mal, wenn Sie Änderungen an der JSON-Datei vornehmen, drücken Sie einfach CTRL + S. Visual Studio ruft NPM automatisch auf und stellt die Pakete wieder her.

Für die Verwendung der Kommandozeile haben andere bereits geantwortet. Aber als Kommandozeilen-Neuling bevorzuge ich diesen Weg.

10
Christian Gollhardt

Sie können die Package Manager-Konsole verwenden, um den Befehl npm auszuführen.

Gehen Sie zum Öffnen der Package Manager-Konsole zu Extras> Nuget Package Manager, wählen Sie Package Manager-Konsole aus und geben Sie Ihren Befehl npm ein.

enter image description here

enter image description here

2
Yew Hong Tat
  • Navigieren Sie im Windows Explorer zu dem Ort, an dem sich die package.json-Datei in Ihrem Projekt befindet. 
  • Erstellen Sie einen Ordner mit dem Namen node_modules in demselben Verzeichnis wie Ihre package.json-Datei
  • Halten Sie die linke [Shift]-Taste gedrückt und klicken Sie mit der rechten Maustaste in den Ordner, der die project.json-Datei enthält. 
  • Wählen Sie im Kontextmenü 'Befehlsfenster hier öffnen'. 
  • Geben Sie Ihren npm-Befehl ein npm install --save react-bootstrap-typeahead
0
AperioOculus