Verwalten von NPM-Paketen in Visual Studio

Mit npm können Sie Pakete zur Verwendung in Ihren Node.js- und ASP.NET Core-Anwendungen installieren und verwalten. Visual Studio erleichtert die Interaktion mit NPM sowie die Ausführung von NPM-Befehlen über die Benutzeroberfläche oder direkt. Wenn Sie mit NPM nicht vertraut sind und weitere Informationen benötigen, wechseln Sie zur NPM-Dokumentation.

Die Visual Studio-Integration mit npm variiert je nach Projekttyp.

• CLI-basierte Projekte (ESPROJ)
• ASP.NET Core
• Öffnen von Ordnern (Node.js)

Wichtig

Von npm wird erwartet, dass der Ordner node_modules und package.json im Projektstamm vorhanden sind. Wenn sich die Ordnerstruktur Ihrer App unterscheidet, sollten Sie Ihre Ordnerstruktur anpassen, wenn Sie npm-Pakete mit Visual Studio verwalten.

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 auf dieselbe Weise wie NuGet-Pakete für ASP.NET Core-Projekte herunterladen können. 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 Knoten npm 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 Core-Projekte

Für Projekte wie ASP.NET Core-Projekte können Sie npm-Unterstützung in Ihr Projekt aufnehmen und npm zur Installation von Paketen verwenden.

Hinweis

Für ASP.NET Core-Projekte können Sie auf den 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 diese zu Ihrem Projekt hinzufügen, um die npm-Unterstützung zu aktivieren. Fügen Sie dazu eine package.json-Datei zum Projekt hinzu.

1. Klicken Sie zum Hinzufügen der Datei package.json mit der rechten Maustaste auf das Projekt im Projektmappen-Explorer und wählen Sie Hinzufügen>Neues Element (oder drücken Sie auf Strg + UMSCHALT + A). Verwenden Sie das Suchfeld zur Suche nach der npm-Datei, wählen Sie die npm-Konfigurationsdatei aus, bestätigen Sie den Standardnamen, und klicken Sie auf Hinzufügen.

2. Fügen Sie mindestens ein npm-Paket in den dependencies- oder devDependencies-Abschnitt von package.json ein. Beispielsweise können Sie Folgendes zur Datei 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 Dependencies/npm (Abhängigkeiten/npm) im Projektmappen-Explorer hinzu. Wenn der Knoten nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf die Datei package.json, und wählen Sie dann Pakete wiederherstellen aus. Um den Installationsstatus des Pakets anzuzeigen, wählen Sie die npm-Ausgabe im Ausgabefenster aus.

   Sie können npm-Pakete mithilfe von package.json konfigurieren. Öffnen Sie package.json entweder direkt, oder klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den npm-Knoten, und wählen Sie dann package.json öffnen aus.

Problembehandlung bei npm-Paketen

• Wenn beim Erstellen Ihrer App oder beim Transpilieren von TypeScript-Code Fehler auftreten, könnten Inkompatibilitäten bei npm-Paketen eine mögliche Ursache sein. Um mögliche Fehler zu ermitteln, sollten Sie bei der Installation der Pakete das npm-Ausgabefenster überprüfen (wie zuvor in diesem Artikel beschrieben). Wenn z. B. eine oder mehrere npm-Paketversionen als veraltet markiert wurden und dadurch einen Fehler verursachen, müssen Sie möglicherweise zum Beheben der Fehler eine neuere Version installieren. Informationen zur Verwendung von package.json zum Steuern von npm-Paketversionen finden Sie unter package.json-Konfiguration.

• In einigen ASP.NET Core-Szenarien zeigt der Projektmappen-Explorer aufgrund eines bekannten Problems, das hier beschrieben wird, möglicherweise nicht den korrekten Status für installierte npm-Pakete an. Beispielsweise wird das Paket möglicherweise als nicht installiert angezeigt, obwohl es installiert ist. In den meisten Fällen können Sie den Projektmappen-Explorer aktualisieren, indem Sie die Datei package.json löschen, Visual Studio neu starten und die Datei package.json wie zuvor im Artikel beschrieben wieder hinzufügen. Bei der Installation von Paketen können Sie den Installationsstatus alternativ im npm-Ausgabefenster überprüfen.

• In einigen ASP.NET Core-Szenarios ist der npm-Knoten im Projektmappen-Explorer möglicherweise nicht sichtbar, nachdem das Projekt erstellt wurde. Um den Knoten erneut 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.