Správa balíčků npm v sadě Visual Studio

npm umožňuje instalovat a spravovat balíčky pro použití v aplikacích Node.js i ASP.NET Core. Visual Studio usnadňuje interakci s npm a vydávání příkazů npm prostřednictvím uživatelského rozhraní nebo přímo. Pokud npm neznáte a chcete se dozvědět víc, přejděte do dokumentace k npm.

Integrace sady Visual Studio s npm se liší v závislosti na typu projektu.

• Projekty založené na rozhraní příkazového řádku (.esproj)
• ASP.NET Core
• Otevřít složku (Node.js)

Důležité

npm očekává složku node_modules a package.json v kořenovém adresáři projektu. Pokud se struktura složek vaší aplikace liší, měli byste změnit strukturu složek, pokud chcete spravovat balíčky npm pomocí sady Visual Studio.

Projekt založený na rozhraní příkazového řádku (.esproj)

Od sady Visual Studio 2022 je správce balíčků npm k dispozici pro projekty založené na rozhraní příkazového řádku, takže teď můžete stáhnout moduly npm podobně jako stahovat balíčky NuGet pro projekty ASP.NET Core. Potom můžete pomocí package.json upravit a odstranit balíčky.

Správce balíčků otevřete tak, že v Průzkumníku řešení kliknete pravým tlačítkem na uzel npm v projektu a zvolíte Přidat balíček npm.

Dále můžete vyhledat balíčky npm, vybrat jeden a nainstalovat výběrem možnosti Instalovat balíček.

ASP.NET základních projektů

U projektů, jako jsou projekty ASP.NET Core, můžete do projektu přidat podporu npm a nainstalovat balíčky pomocí npm.

Poznámka:

U ASP.NET Core projektů můžete k instalaci souborů JavaScriptu a CSS na straně klienta použít také Správce knihoven nebo yarn. Jedna z těchto možností může být nutná, pokud potřebujete integraci s MSBuild nebo rozhraní příkazového řádku dotnet pro správu balíčků, které npm neposkytuje.

Pokud projekt ještě neobsahuje souborpackage.json , můžete ho přidat, abyste povolili podporu npm přidáním package.json souboru do projektu.

1. Pokud chcete přidat souborpackage.json , klikněte pravým tlačítkem na projekt v Průzkumníku řešení a zvolte Přidat>novou položku (nebo stiskněte ctrl + SHIFT + A). Pomocí vyhledávacího pole vyhledejte soubor npm, zvolte konfigurační soubor npm, použijte výchozí název a klikněte na Přidat.

2. Zahrnout jeden nebo více balíčků npm do dependencies nebo devDependencies oddílu package.json. Do souboru můžete například přidat následující položky:

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

   Když soubor uložíte, Visual Studio přidá balíček do uzlu Závislosti / npm v Průzkumníku řešení. Pokud uzel nevidíte, klikněte pravým tlačítkem na package.json a zvolte Obnovit balíčky. Pokud chcete zobrazit stav instalace balíčku, vyberte výstup npm v okně Výstup.

   Poznámka:

   Uzel npm je k dispozici pro většinu typů projektů ASP.NET Core, včetně Blazoru. U projektů MAUI Blazor musíte použít příkazový řádek npm, protože v Průzkumníku řešení nebude k dispozici žádný uzel npm.

   Balíčky npm můžete nakonfigurovat pomocí package.json. package.json Otevřete ho přímo nebo klikněte pravým tlačítkem na uzel npm v Průzkumníku řešení a zvolte Otevřít package.json.

Řešení potíží s balíčky npm

• Pokud při sestavování aplikace nebo při transpilování kódu TypeScriptu dojde k chybám, zkontrolujte nekompatibilitu balíčku npm jako potenciální zdroj chyb. Pokud chcete pomoct s identifikací chyb, zkontrolujte okno výstupu npm při instalaci balíčků, jak je popsáno výše v tomto článku. Pokud je například jedna nebo více verzí balíčků npm zastaralá a výsledkem je chyba, možná budete muset nainstalovat novější verzi, abyste opravili chyby. Informace o použití package.json k řízení verzí balíčků npm najdete v tématupackage.json konfigurace.

• V některých ASP.NET základních scénářích nemusí Průzkumník řešení zobrazovat správný stav nainstalovaných balíčků npm kvůli známému problému popsanému tady. Balíček se například může při instalaci zobrazit jako nenainstalovaný. Ve většině případů můžete Průzkumníka řešení aktualizovat odstraněním package.json, restartováním sady Visual Studio a opětovným přidáním package.json souboru, jak je popsáno výše v tomto článku. Nebo při instalaci balíčků můžete pomocí okna výstupu npm ověřit stav instalace.

• V některých ASP.NET základních scénářích nemusí být uzel npm v Průzkumníku řešení po sestavení projektu viditelný. Pokud chcete uzel znovu zobrazit, klikněte pravým tlačítkem myši na uzel projektu a zvolte Uvolnit projekt. Potom klikněte pravým tlačítkem myši na uzel projektu a zvolte Znovu načíst projekt.