NPM-csomagok kezelése a Visual Studióban

Az npm lehetővé teszi a Node.js és ASP.NET Core-alkalmazásokban egyaránt használható csomagok telepítését és kezelését. A Visual Studio megkönnyíti az npm használatát, és npm-parancsokat ad ki a felhasználói felületen vagy közvetlenül. Ha nem ismeri az npm-et, és szeretne többet megtudni, tekintse meg az npm dokumentációját.

A Visual Studio és az npm integrációja a projekt típusától függően eltérő.

• CLI-alapú projektek (.esproj)
• ASP.NET Core
• Mappa megnyitása (Node.js)

Fontos

Az npm a projekt gyökérmappájában várja a node_modules mappát és package.json. Ha az alkalmazás mappastruktúrája eltérő, módosítania kell a mappastruktúrát, ha npm-csomagokat szeretne kezelni a Visual Studióval.

CLI-alapú projekt (.esproj)

A Visual Studio 2022-től kezdve az npm-csomagkezelő CLI-alapú projektekhezérhető el, így mostantól ugyanúgy töltheti le az npm-modulokat, mint ahogyan a NuGet-csomagokat ASP.NET Core-projektekhez. Ezután package.json használatával módosíthatja és törölheti a csomagokat.

A csomagkezelő megnyitásához a Megoldáskezelőben kattintson a jobb gombbal az npm csomópontra a projektben, és válassza az NPM-csomag hozzáadásalehetőséget.

Ezután megkeresheti az npm-csomagokat, kiválaszthat egyet, és telepíthet a Csomag telepítéselehetőséget választva.

ASP.NET Alapprojektek

Az olyan projektek esetében, mint a ASP.NET Core-projektek, felvehet npm-támogatást a projektbe, és az npm használatával csomagokat telepíthet.

Jegyzet

Az ASP.NET Core-projektek esetében az ügyféloldali JavaScript- és CSS-fájlok telepítéséhez az npm helyett Library Manager- vagy yarn is használható. Ezen lehetőségek egyike akkor lehet szükséges, ha integrálásra van szükség az MSBuilddel vagy a dotnet CLI-vel a csomagkezeléshez, amelyet az npm nem biztosít.

Ha a projekt még nem tartalmaz package.json fájlt, hozzáadhat egyet az npm-támogatás engedélyezéséhez, ha hozzáad egy package.json fájlt a projekthez.

1. A package.json fájl hozzáadásához kattintson a jobb gombbal a projektre a Megoldáskezelőben, és válassza >Új elem hozzáadása (vagy nyomja le Ctrl + SHIFT + A). A keresőmezővel keresse meg az npm-fájlt, válassza ki az npm konfigurációs fájl, használja az alapértelmezett nevet, és kattintson a hozzáadása elemre.

2. Adjon meg egy vagy több npm-csomagot a dependenciesdevDependencies vagy szakaszában. Hozzáadhatja például a következőket a fájlhoz:

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

   A fájl mentésekor a Visual Studio hozzáadja a csomagot a Függőségek /npm csomóponthoz a Megoldáskezelőben. Ha nem látja a csomópontot, kattintson a jobb gombbal a package.json, és válassza a Csomagok visszaállításalehetőséget. A csomag telepítési állapotának megtekintéséhez válassza npm kimenetet a Kimenet ablakban.

   Jegyzet

   Az npm csomópont a legtöbb ASP.NET Core-projekttípushoz elérhető, beleértve a Blazort is. A MAUI Blazor-projektekhez az npm parancssort kell használnia, mert nem lesz npm-csomópont a Megoldáskezelőben.

   Az npm-csomagokat a package.jsonhasználatával konfigurálhatja. Nyissa meg közvetlenül package.json, vagy kattintson a jobb gombbal az npm csomópontra a Megoldáskezelőben, és válassza a Megnyitás package.jsonlehetőséget.

NPM-csomagok hibaelhárítása

• Ha hibát tapasztal az alkalmazás létrehozásakor vagy TypeScript-kód fordításakor, ellenőrizze, hogy az npm-csomag inkompatibilitása-e a hibák lehetséges forrása. A hibák azonosításához ellenőrizze az npm kimeneti ablakát a csomagok telepítésekor, a cikkben korábban ismertetett módon. Ha például egy vagy több npm-csomagverzió elavult, és hibát eredményez, előfordulhat, hogy a hibák kijavításához telepítenie kell egy újabb verziót. További információért arról, hogyan lehet package.json használatával irányítani az npm csomagverziókat, lásd a package.json konfigurációs.

• Egyes ASP.NET Alapforgatókönyvekben előfordulhat, hogy a Megoldáskezelő nem jeleníti meg a telepített npm-csomagok megfelelő állapotát az itt ismertetett ismert probléma miatt,. Előfordulhat például, hogy úgy tűnik, a csomag nincs telepítve, holott valójában telepítve van. A legtöbb esetben frissítheti a Megoldáskezelőt a package.jsontörlésével, a Visual Studio újraindításával, valamint a jelen cikkben korábban ismertetett package.json fájl újbóli hozzáadásával. A csomagok telepítésekor az npm kimeneti ablakával ellenőrizheti a telepítés állapotát.

• Egyes ASP.NET Alapforgatókönyvekben előfordulhat, hogy a Megoldáskezelő npm csomópontja nem látható a projekt létrehozása után. Ha ismét láthatóvá szeretné tenni a csomópontot, kattintson a jobb gombbal a projektcsomópontra, és válassza a Projekt eltávolítása lehetőséget. Ezután kattintson a jobb gombbal a projektcsomópontra, és válassza Project-újratöltése lehetőséget.