Verwalten von npm-Paketen in Visual Studio

npm ermöglicht es Ihnen, Pakete für die Verwendung in Node.js- und ASP.NET Core-Anwendungen zu installieren und zu verwalten. Visual Studio erleichtert die Interaktion mit npm und das Ausgeben von npm-Befehlen über die Benutzeroberfläche oder direkt. Wenn Sie mit npm nicht vertraut sind und mehr erfahren möchten, wechseln Sie zur npm-Dokumentation.

Die Visual Studio-Integration in npm unterscheidet sich je nach Projekttyp.

• CLI-basierte Projekte (.esproj)
• ASP.NET Core
• Ordner öffnen (Node.js)

Von Bedeutung

npm erwartet den ordner node_modules und package.json im Projektstamm. Wenn sich die Ordnerstruktur Ihrer App unterscheidet, sollten Sie die Ordnerstruktur ändern, wenn Sie npm-Pakete mit Visual Studio verwalten möchten.

CLI-basiertes Projekt (.esproj)

Ab Visual Studio 2022 ist der npm-Paket-Manager für CLI-basierte Projekte verfügbar, sodass Sie npm-Module jetzt ähnlich herunterladen können, wie Sie NuGet-Pakete für ASP.NET Core-Projekte herunterladen. Anschließend können Sie package.json verwenden, um Pakete zu ändern und zu löschen.

Um den Paket-Manager zu öffnen, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den npm-Knoten in Ihrem Projekt, und wählen Sie "npm-Paket hinzufügen" aus.

Als Nächstes können Sie nach npm-Paketen suchen, eines auswählen und installieren, indem Sie "Paket installieren" auswählen.

ASP.NET Kernprojekte

Für Projekte wie ASP.NET Core-Projekte können Sie npm-Unterstützung in Ihrem Projekt hinzufügen und npm zum Installieren von Paketen verwenden.

Hinweis

Für ASP.NET Core-Projekte können Sie auch Bibliotheks-Manager oder Yarn anstelle von npm verwenden, um clientseitige JavaScript- und CSS-Dateien zu installieren. Eine dieser Optionen kann erforderlich sein, wenn Sie eine Integration mit MSBuild oder der dotnet CLI für die Paketverwaltung benötigen, die von npm nicht bereitgestellt wird.

Wenn Ihr Projekt noch keine package.json Datei enthält, können Sie eine hinzufügen, um die npm-Unterstützung zu aktivieren, indem Sie dem Projekt eine package.json Datei hinzufügen.

1. Um die package.json-Datei hinzuzufügen, klicken Sie mit der rechten Maustaste im Projektmappen-Explorer auf das Projekt und wählen Sie Hinzufügen>Neues Element aus (oder drücken Sie Ctrl + UMSCHALT + A). Verwenden Sie das Suchfeld, um die npm-Datei zu finden, wählen Sie die npm-Konfigurationsdateiaus, verwenden Sie den Standardnamen, und klicken Sie auf Hinzufügen.

2. Schließen Sie ein oder mehrere npm-Pakete in den dependencies- oder devDependencies-Abschnitt von package.json ein. Beispielsweise können Sie der Datei Folgendes hinzufügen:

   "devDependencies": {
      "gulp": "4.0.2",
      "@types/jquery": "3.5.29"
   }
   

   Wenn Sie die Datei speichern, fügt Visual Studio das Paket unter dem Knoten "Abhängigkeiten/npm" im Projektmappen-Explorer hinzu. Wenn der Knoten nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf package.json , und wählen Sie "Pakete wiederherstellen" aus. Um den Installationsstatus des Pakets anzuzeigen, wählen Sie die npm-Ausgabe im Ausgabefenster aus.

   Hinweis

   Der npm-Knoten ist für die meisten ASP.NET Core-Projekttypen verfügbar, einschließlich Blazor. Für MAUI Blazor-Projekte müssen Sie die npm-Befehlszeile verwenden, da im Projektmappen-Explorer kein npm-Knoten vorhanden ist.

   Mit package.json können Sie npm-Pakete konfigurieren. Öffnen Sie package.json direkt oder klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den npm-Knoten und wählen Sie „package.json öffnen“ aus.

Problembehandlung bei npm-Paketen

• Wenn beim Erstellen ihrer App oder beim Transpilieren von TypeScript-Code Fehler auftreten, überprüfen Sie, ob npm-Paketkompatibilitäten als potenzielle Fehlerquelle vorliegen. Um Fehler zu erkennen, überprüfen Sie das npm-Ausgabefenster bei der Installation der Pakete, wie zuvor in diesem Artikel beschrieben. Wenn beispielsweise mindestens eine npm-Paketversion veraltet ist und zu einem Fehler führt, müssen Sie möglicherweise eine neuere Version installieren, um Fehler zu beheben. Informationen zur Verwendung vonpackage.json zum Steuern von npm-Paketversionen finden Sie unter package.json Konfiguration.

• In einigen ASP.NET Kernszenarien zeigt der Projektmappen-Explorer möglicherweise aufgrund eines bekannten Problems, das hier beschrieben wurde, möglicherweise nicht den richtigen Status für installierte npm-Pakete an. Beispielsweise kann das Paket bei der Installation als nicht installiert angezeigt werden. In den meisten Fällen können Sie den Projektmappen-Explorer aktualisieren, indem Sie package.jsonlöschen, Visual Studio neu starten und die package.json Datei wie weiter oben in diesem Artikel beschrieben erneut hinzufügen. Alternativ können Sie beim Installieren von Paketen das npm-Ausgabefenster verwenden, um den Installationsstatus zu überprüfen.

• In einigen ASP.NET Kernszenarien ist der npm-Knoten im Projektmappen-Explorer nach dem Erstellen des Projekts möglicherweise nicht sichtbar. Um den Knoten wieder sichtbar zu machen, klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie "Projekt entladen" aus. Klicken Sie dann mit der rechten Maustaste auf den Projektknoten, und wählen Sie "Projekt erneut laden" aus.