Dela via

Hantera npm-paket i Visual Studio

Med npm kan du installera och hantera paket för användning i både Node.js och ASP.NET Core-program. Visual Studio gör det enkelt att interagera med npm och utfärda npm-kommandon via användargränssnittet eller direkt. Om du inte känner till npm och vill veta mer går du till npm-dokumentationen.

Visual Studio-integrering med npm skiljer sig beroende på projekttyp.

Viktigt!

npm förväntar sig node_modules-mappen och package.json i projektroten. Om appens mappstruktur skiljer sig bör du ändra mappstrukturen om du vill hantera npm-paket med Hjälp av Visual Studio.

CLI-baserat projekt (.esproj)

Från och med Visual Studio 2022 är npm-pakethanteraren tillgänglig för CLI-baserade projekt, så du kan nu ladda ned npm-moduler på samma sätt som du laddar ned NuGet-paket för ASP.NET Core-projekt. Sedan kan du använda package.json för att ändra och ta bort paket.

Om du vill öppna pakethanteraren högerklickar du på noden npm i projektet från Solution Explorer och väljer Lägg till npm-paket.

Öppna pakethanteraren från Solution Explorer

Sedan kan du söka efter npm-paket, välja ett och installera genom att välja Installera paket.

Installera nytt npm-paket för esproj

Node.js projekt

För Node.js projekt (.njsproj) kan du utföra följande uppgifter:

Dessa funktioner fungerar tillsammans och synkroniseras med projektsystemet och denpackage.json filen i projektet.

Förutsättningar

Du behöver arbetsbelastningen Node.js-utveckling och Node.js-körtiden installerad för att lägga till npm-support till ditt projekt. Detaljerade steg finns i Skapa en Node.js- och Express-app.

Anmärkning

För befintliga Node.js projekt använder du mallen Från befintlig Node.js-kodlösning eller projekttypen Öppna mapp (Node.js) för att aktivera npm i projektet.

Installera paket från Solution Explorer (Node.js)

För Node.js projekt är det enklaste sättet att installera npm-paket via installationsfönstret för npm-paketet. Om du vill komma åt det här fönstret högerklickar du på noden npm i projektet och väljer Installera nya npm-paket.

Installera nytt npm-paket för Node.js

I det här fönstret kan du söka efter ett paket, ange alternativ och installera.

Skärmbild av dialogrutan Installera nya npm-paket.

  • Beroendetyp – Välj mellan Standard-, Utvecklings- och Valfria paket. Standard anger att paketet är ett körningsberoende, medan Utveckling anger att paketet endast krävs under utvecklingen.
  • Lägg till i package.json – rekommenderas. Det här konfigurerbara alternativet är inaktuellt.
  • Vald version – Välj den version av paketet som du vill installera.
  • Andra npm-argument – Ange andra standardargument för npm. Du kan till exempel ange ett versionsvärde, till exempel @~0.8 för att installera en specifik version som inte är tillgänglig i versionslistan.

Du kan se förloppet för installationen i npm-utdata i utdatafönstret (om du vill öppna fönstret väljer du Visa>utdata eller trycker på Ctrl + Alt + O). Det kan ta lite tid.

npm-utdata

Tips/Råd

Du kan söka efter begränsade paket genom att vänta på sökfrågan med det omfång som du är intresserad av, till exempel skriva @types/mocha för att söka efter TypeScript-definitionsfiler för mocha. När du installerar typdefinitioner för TypeScript kan du också ange den TypeScript-version som du riktar in dig på genom att ange en version, till exempel @ts2.6, i argumentfältet npm.

Hantera installerade paket i Solution Explorer (Node.js)

npm-paket visas i Solution Explorer. Posterna under npm-noden efterliknar beroendena i package.json-filen .

Skärmbild av npm-noden i Solution Explorer som visar installationsstatus för npm-paketen.

Paketstatus

  • Installerat paket – Installerat och listat i package.json
  • Överflödigt paket – Installerat, men inte uttryckligen listat i package.json
  • Paket saknas – Inte installerat, men visas i package.json

Högerklicka på npm-noden för att utföra någon av följande åtgärder:

  • Installera nya npm-paket Öppnar användargränssnittet för att installera nya paket.
  • Installera npm-paket Kör kommandot npm install för att installera alla paket som anges i package.json. (Kör npm install.)
  • Uppdatera npm-paket Uppdaterar paket till de senaste versionerna enligt semantisk versionshantering (SemVer) som anges i package.json. (Kör npm update --save.). SemVer-intervall anges vanligtvis med hjälp av "~" eller "^". För mer information, se package.json-konfiguration.

Högerklicka på en paketnod för att utföra någon av följande åtgärder:

  • Installera npm-paket Kör kommandot npm install för att installera paketversionen som anges i package.json. (Kör npm install.)
  • Uppdatera npm-paket Uppdaterar paketet till den senaste versionen enligt SemVer-intervallet som anges i package.json. (Kör npm update --save.) SemVer-intervall anges vanligtvis med hjälp av "~" eller "^".
  • Avinstallera npm-paket Avinstallerar paketet och tar bort det från package.json (kör npm uninstall --save.)

Anmärkning

Hjälp med att lösa problem med npm-paket finns i Felsökning.

Använd kommandot .npm i det interaktiva Node.js-fönstret (Node.js)

Du kan också använda .npm kommandot i det interaktiva Node.js-fönstret för att köra npm-kommandon. Om du vill öppna fönstret högerklickar du på projektet i Solution Explorer och väljer Öppna Node.js interaktivt fönster (eller trycker på Ctrl + K, N).

I fönstret kan du använda kommandon som följande för att installera ett paket:

.npm install azure@4.2.3

Tips/Råd

Som standard körs npm i projektets startkatalog. Om du har flera projekt i lösningen anger du namnet eller sökvägen till projektet inom hakparenteser. .npm [MyProjectNameOrPath] install azure@4.2.3

Tips/Råd

Om projektet inte innehåller en package.json fil använder du .npm init -y för att skapa en ny package.json fil med standardposter.

ASP.NET Core-projekt

För projekt som ASP.NET Core-projekt kan du lägga till npm-stöd i projektet och använda npm för att installera paket.

Anmärkning

För ASP.NET Core-projekt kan du också använda Library Manager eller yarn i stället för npm för att installera JavaScript- och CSS-filer på klientsidan. Ett av dessa alternativ kan vara nödvändigt om du behöver integrering med MSBuild eller dotnet CLI för pakethantering, som inte tillhandahålls av npm.

Om projektet inte redan innehåller en package.json fil kan du lägga till en för att aktivera npm-stöd genom att lägga till en package.json fil i projektet.

  1. Om du vill lägga till filenpackage.json högerklickar du på projektet i Solution Explorer och väljer Lägg till>nytt objekt (eller trycker på Ctrl + SKIFT + A). Använd sökrutan för att hitta npm-filen, välj npm-konfigurationsfilen, använd standardnamnet och klicka på Lägg till.

  2. Inkludera ett eller flera npm-paket i dependencies- eller devDependencies-avsnittet i package.json. Du kan till exempel lägga till följande i filen:

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

    När du sparar filen lägger Visual Studio till paketet under noden Beroenden/npm i Solution Explorer. Om du inte ser noden högerklickar du på package.json och väljer Återställ paket. Om du vill visa paketinstallationsstatus väljer du npm-utdata i utdatafönstret.

    Anmärkning

    NPM-noden är tillgänglig för de flesta ASP.NET Core-projekttyper, inklusive Blazor. För MAUI Blazor-projekt måste du använda npm-kommandoraden eftersom det inte finns någon npm-nod i Solution Explorer.

    Du kan konfigurera npm-paket med .package.json package.json Öppna antingen direkt eller högerklicka på noden npm i Solution Explorer och välj Öppna package.json.

Felsöka npm-paket

  • Om du ser några fel när du skapar din app eller överför TypeScript-kod kontrollerar du npm-paketinkompatibiliteter som en potentiell källa till fel. För att identifiera fel kontrollerar du npm-utdatafönstret när du installerar paketen, enligt beskrivningen tidigare i den här artikeln. Om till exempel en eller flera npm-paketversioner har blivit inaktuella och resulterar i ett fel kan du behöva installera en nyare version för att åtgärda fel. Information om att använda package.json för att styra npm-paketversioner finns i package.json-konfiguration.

  • I vissa ASP.NET Core-scenarier kanske Solution Explorer inte visar rätt status för installerade npm-paket på grund av ett känt problem som beskrivs här. Paketet kan till exempel visas som inte installerat när det är installerat. I de flesta fall kan du uppdatera Solution Explorer genom att ta bort package.json, starta om Visual Studio och lägga till package.json-filen igen enligt beskrivningen tidigare i den här artikeln. Eller när du installerar paket kan du använda fönstret npm-utdata för att verifiera installationsstatusen.

  • I vissa ASP.NET Core-scenarier kanske npm-noden i Solution Explorer inte visas när du har skapat projektet. Om du vill göra noden synlig igen högerklickar du på projektnoden och väljer Ta bort projekt. Högerklicka sedan på projektnoden och välj Läs in projekt igen.

  • För Node.js-projekt måste du ha verktygspaketet Node.js-utveckling installerat för npm-stöd. npm kräver Node.js. Om du inte har Node.js installerat rekommenderar vi att du installerar LTS-versionen från Node.js webbplats för bästa kompatibilitet med externa ramverk och bibliotek.