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 dostupný 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 upravovat a odstraňovat balíčky.

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

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 základních projektů můžete k instalaci souborů JavaScriptu a CSS na straně klienta použít také Správce knihoven nebo příze místo npm. 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 soubor package.json , můžete ho přidat, abyste povolili podporu npm přidáním souboru package.json do projektu.

1. Pokud chcete přidat soubor package.json, klikněte pravým tlačítkem myši na projekt v Průzkumník ř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. Do části package.json devDependenciesuveďte jeden nebo více balíčků dependencies npm. 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ík ř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.

   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ík ř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ématu package.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 aktualizovat Průzkumník řešení odstraněním package.json, restartováním sady Visual Studio a opětovným přidáním souboru package.json, 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ík ř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.