Zarządzanie pakietami npm w programie Visual Studio

Narzędzie npm umożliwia instalowanie pakietów do użycia i zarządzanie nimi zarówno w aplikacjach Node.js, jak i ASP.NET Core. Program Visual Studio ułatwia interakcję z serwerem npm i wydawanie poleceń npm za pośrednictwem interfejsu użytkownika lub bezpośrednio. Jeśli nie znasz narzędzia npm i chcesz dowiedzieć się więcej, przejdź do dokumentacji narzędzia npm.

Integracja programu Visual Studio z programem npm różni się w zależności od typu projektu.

• Projekty oparte na interfejsie wiersza polecenia (esproj)
• ASP.NET Core
• Otwórz folder (Node.js)

Ważne

Narzędzie npm oczekuje folderu node_modules i package.json w katalogu głównym projektu. Jeśli struktura folderów aplikacji jest inna, należy zmodyfikować strukturę folderów, jeśli chcesz zarządzać pakietami npm przy użyciu programu Visual Studio.

Projekt oparty na interfejsie wiersza polecenia (esproj)

Począwszy od programu Visual Studio 2022, menedżer pakietów npm jest dostępny dla projektów opartych na interfejsie wiersza polecenia, dzięki czemu można teraz pobierać moduły npm podobnie do sposobu pobierania pakietów NuGet dla projektów ASP.NET Core. Następnie możesz użyć package.json do modyfikowania i usuwania pakietów.

Aby otworzyć menedżera pakietów, w Eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł npm w projekcie i wybierz polecenie Dodaj pakiet npm.

Następnie możesz wyszukać pakiety npm, wybrać jeden i zainstalować, wybierając pozycję Zainstaluj pakiet.

projekty ASP.NET Core

W przypadku projektów, takich jak projekty ASP.NET Core, można dodać obsługę narzędzia npm w projekcie i użyć narzędzia npm do instalowania pakietów.

Uwaga / Notatka

W przypadku projektów ASP.NET Core można również użyć programu Library Manager lub yarn zamiast narzędzia npm, aby zainstalować pliki JavaScript i CSS po stronie klienta. Jedną z tych opcji może być konieczne, jeśli wymagana jest integracja z programem MSBuild lub interfejsem wiersza polecenia dotnet na potrzeby zarządzania pakietami, który nie jest udostępniany przez narzędzie npm.

Jeśli projekt nie zawiera jeszcze pliku package.json , możesz dodać go, aby włączyć obsługę narzędzia npm, dodając plik package.json do projektu.

1. Aby dodać plik package.json , kliknij prawym przyciskiem myszy projekt w Eksploratorze rozwiązań i wybierz polecenie Dodaj>nowy element (lub naciśnij Ctrl + SHIFT + A). Użyj pola wyszukiwania, aby znaleźć plik npm, wybierz plik konfiguracji npm, użyj nazwy domyślnej, a następnie kliknij przycisk Dodaj.

2. Uwzględnij co najmniej jeden pakiet npm w dependencies sekcji lub devDependenciespackage.json. Na przykład do pliku można dodać następujące elementy:

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

   Po zapisaniu pliku program Visual Studio dodaje pakiet w węźle Zależności/npm w Eksploratorze rozwiązań. Jeśli nie widzisz węzła, kliknij prawym przyciskiem myszy package.json i wybierz polecenie Przywróć pakiety. Aby wyświetlić stan instalacji pakietu, wybierz pozycję npm output (Dane wyjściowe) w oknie Dane wyjściowe.

   Uwaga / Notatka

   Węzeł npm jest dostępny dla większości typów projektów ASP.NET Core, w tym platformy Blazor. W przypadku projektów MAUI Blazor należy użyć wiersza polecenia npm, ponieważ żaden węzeł npm nie będzie obecny w Eksploratorze rozwiązań.

   Pakiety npm można skonfigurować przy użyciu polecenia package.json. Otwórz package.json bezpośrednio lub kliknij prawym przyciskiem myszy węzeł npm w Eksploratorze rozwiązań i wybierz polecenie Otwórz package.json.

Rozwiązywanie problemów z pakietami npm

• Jeśli podczas kompilowania aplikacji lub transpilowania kodu TypeScript wystąpią jakiekolwiek błędy, sprawdź niezgodności pakietów npm jako potencjalne źródło błędów. Aby ułatwić identyfikowanie błędów, sprawdź okno npm Output podczas instalowania pakietów zgodnie z opisem w tym artykule. Jeśli na przykład co najmniej jedna wersja pakietu npm jest przestarzała i powoduje wystąpienie błędu, może być konieczne zainstalowanie nowszej wersji, aby naprawić błędy. Aby uzyskać informacje na temat używania package.json do kontrolowania wersji pakietów npm, zobacz package.json konfiguracji.

• W niektórych scenariuszach ASP.NET Core Eksplorator rozwiązań może nie wyświetlać poprawnego stanu zainstalowanych pakietów npm z powodu znanego problemu opisanego tutaj. Na przykład pakiet może być wyświetlany jako nieinstalowany po zainstalowaniu. W większości przypadków można zaktualizować Eksploratora rozwiązań, usuwając package.json, ponownie uruchamiając program Visual Studio i dodając ponownie plik package.json zgodnie z opisem we wcześniejszej sekcji tego artykułu. Ewentualnie podczas instalowania pakietów możesz użyć okna npm Output (Dane wyjściowe narzędzia npm), aby zweryfikować stan instalacji.

• W niektórych scenariuszach ASP.NET Core węzeł npm w Eksploratorze rozwiązań może nie być widoczny po utworzeniu projektu. Aby ponownie uwidocznić węzeł, kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Zwolnij projekt. Następnie kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Załaduj ponownie projekt.