NPM-pakketten beheren in Visual Studio

met npm kunt u pakketten installeren en beheren voor gebruik in zowel Node.js als ASP.NET Core-toepassingen. Met Visual Studio kunt u eenvoudig communiceren met npm en npm-opdrachten uitgeven via de gebruikersinterface of rechtstreeks. Als u niet bekend bent met npm en meer wilt weten, gaat u naar de npm-documentatie.

Visual Studio-integratie met npm verschilt, afhankelijk van uw projecttype.

• OP CLI gebaseerde projecten (.esproj)
• ASP.NET Core
• Map openen (Node.js)

Belangrijk

npm verwacht de map node_modules en package.json in de hoofdmap van het project. Als de mapstructuur van uw app anders is, moet u de mapstructuur wijzigen als u npm-pakketten wilt beheren met Visual Studio.

CLI-project (.esproj)

Vanaf Visual Studio 2022 is npm-pakketbeheer beschikbaar voor CLI-projecten, zodat u nu npm-modules kunt downloaden die vergelijkbaar zijn met de manier waarop u NuGet-pakketten downloadt voor ASP.NET Core-projecten. Vervolgens kunt u package.json gebruiken om pakketten te wijzigen en te verwijderen.

Als u pakketbeheer wilt openen, klikt u in Solution Explorer met de rechtermuisknop op het npm-knooppunt in uw project en kiest u Npm-pakket toevoegen.

Vervolgens kunt u zoeken naar npm-pakketten, een pakket selecteren en installeren door Pakket installeren te selecteren.

ASP.NET Kernprojecten

Voor projecten zoals ASP.NET Core-projecten kunt u npm-ondersteuning toevoegen aan uw project en npm gebruiken om pakketten te installeren.

Opmerking

Voor ASP.NET Core-projecten kunt u ook Library Manager of yarn gebruiken in plaats van npm om JavaScript- en CSS-bestanden aan de clientzijde te installeren. Een van deze opties kan nodig zijn als u integratie met MSBuild of de dotnet CLI nodig hebt voor pakketbeheer, die niet wordt geleverd door npm.

Als uw project nog geen package.json-bestand bevat, kunt u er een toevoegen om npm-ondersteuning in te schakelen door een package.json-bestand aan het project toe te voegen.

1. Als u het package.json-bestand wilt toevoegen, klikt u met de rechtermuisknop op het project in Solution Explorer en kiest uNieuw item> (of drukt u op Ctrl + Shift + A). Gebruik het zoekvak om het npm-bestand te zoeken, kies het npm-configuratiebestand, gebruik de standaardnaam en klik op Toevoegen.

2. Neem een of meer npm-pakketten op in de dependencies of devDependencies sectie van package.json. U kunt bijvoorbeeld het volgende toevoegen aan het bestand:

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

   Wanneer u het bestand opslaat, voegt Visual Studio het pakket toe onder het knooppunt Afhankelijkheden/npm in Solution Explorer. Als u het knooppunt niet ziet, klikt u met de rechtermuisknop op package.json en kiest u Pakketten herstellen. Als u de installatiestatus van het pakket wilt weergeven, selecteert u npm-uitvoer in het venster Uitvoer.

   Opmerking

   Het npm-knooppunt is beschikbaar voor de meeste ASP.NET Core-projecttypen, waaronder Blazor. Voor TENANT Blazor-projecten moet u de npm-opdrachtregel gebruiken omdat er geen npm-knooppunt aanwezig is in Solution Explorer.

   U kunt npm-pakketten configureren met behulp van package.json. package.json Open rechtstreeks of klik met de rechtermuisknop op het npm-knooppunt in Solution Explorer en kies package.jsonopenen.

Problemen met npm-pakketten oplossen

• Als er fouten optreden bij het bouwen van uw app of het transpileren van TypeScript-code, controleert u of npm-pakket niet compatibel is als mogelijke bron van fouten. Als u fouten wilt identificeren, controleert u het npm-uitvoervenster bij het installeren van de pakketten, zoals eerder in dit artikel is beschreven. Als een of meer npm-pakketversies bijvoorbeeld zijn afgeschaft en er een fout optreedt, moet u mogelijk een recentere versie installeren om fouten op te lossen. Zie package.json configuratie voor meer informatie over het gebruik van package.json om npm-pakketversies te beheren.

• In sommige ASP.NET Core-scenario's geeft Solution Explorer mogelijk niet de juiste status weer voor geïnstalleerde NPM-pakketten vanwege een bekend probleem dat hier wordt beschreven. Het pakket kan bijvoorbeeld worden weergegeven als niet geïnstalleerd wanneer het is geïnstalleerd. In de meeste gevallen kunt u Solution Explorer bijwerken door package.jsonte verwijderen, Visual Studio opnieuw te starten en het package.json bestand opnieuw toe te voegen, zoals eerder in dit artikel is beschreven. Of wanneer u pakketten installeert, kunt u het npm-uitvoervenster gebruiken om de installatiestatus te controleren.

• In sommige ASP.NET Kernscenario's is het npm-knooppunt in Solution Explorer mogelijk niet zichtbaar nadat u het project hebt gebouwd. Als u het knooppunt weer zichtbaar wilt maken, klikt u met de rechtermuisknop op het projectknooppunt en kiest u Project verwijderen. Klik vervolgens met de rechtermuisknop op het projectknooppunt en kies Project opnieuw laden.