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żna użyć package.json do modyfikowania i usuwania pakietów.

Aby otworzyć menedżera pakietów, w Eksplorator 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

W przypadku projektów ASP.NET Core można również użyć Menedżera biblioteki lub przędzy zamiast narzędzia npm do zainstalowania plików 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 Eksplorator 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 devDependencies package.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 Eksplorator 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.

   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 Eksplorator 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ć prawidłowego 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ć Eksplorator rozwiązań przez usunięcie package.json, ponowne uruchomienie programu Visual Studio i ponowne dodanie pliku 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 Eksplorator 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.