Udostępnij za pośrednictwem


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.

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.

Otwórz menedżera pakietów z Eksplorator rozwiązań

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

Instalowanie nowego pakietu npm dla esproj

projekty Node.js

W przypadku projektów Node.js (njsproj) można wykonywać następujące zadania:

Te funkcje współpracują ze sobą i synchronizują się z systemem projektu oraz plikiem package.json w projekcie.

Wymagania wstępne

Aby dodać obsługę programu npm do projektu, potrzebne jest obciążenie deweloperskie Node.js i środowisko uruchomieniowe Node.js. Aby uzyskać szczegółowe instrukcje, zobacz Tworzenie aplikacji Node.js i Express.

Uwaga

W przypadku istniejących projektów Node.js użyj szablonu rozwiązania z istniejącego kodu Node.js lub typu projektu Otwórz folder (Node.js), aby włączyć program npm w projekcie.

Instalowanie pakietów z Eksplorator rozwiązań (Node.js)

W przypadku projektów Node.js najprostszym sposobem instalacji pakietów npm jest okno instalacji pakietu npm. Aby uzyskać dostęp do tego okna, kliknij prawym przyciskiem myszy węzeł npm w projekcie i wybierz polecenie Zainstaluj nowe pakiety npm.

Instalowanie nowego pakietu npm dla Node.js

W tym oknie można wyszukać pakiet, określić opcje i zainstalować.

Zrzut ekranu przedstawiający okno dialogowe Instalowanie nowych pakietów npm.

  • Typ zależności — wybierane między pakietami Standard, Development i Optional . Standard określa, że pakiet jest zależnością środowiska uruchomieniowego, podczas gdy programowanie określa, że pakiet jest wymagany tylko podczas programowania.
  • Dodaj do package.json — zalecane. Ta konfigurowalna opcja jest przestarzała.
  • Wybrana wersja — wybierz wersję pakietu, który chcesz zainstalować.
  • Inne argumenty npm — określ inne standardowe argumenty npm. Możesz na przykład wprowadzić wartość wersji, na @~0.8 przykład zainstalować określoną wersję, która nie jest dostępna na liście wersji.

Postęp instalacji można zobaczyć w danych wyjściowych npm w oknie Dane wyjściowe (aby otworzyć okno, wybierz pozycję Wyświetl>dane wyjściowe lub naciśnij Ctrl + Alt + O). Może to potrwać jakiś czas.

Dane wyjściowe npm

Napiwek

Możesz wyszukać pakiety o określonym zakresie, tworząc wstępne zapytanie wyszukiwania z zakresem, który cię interesuje, na przykład wpisz @types/mocha , aby wyszukać pliki definicji języka TypeScript dla makiety. Ponadto podczas instalowania definicji typów dla języka TypeScript można określić docelową wersję języka TypeScript, określając wersję, taką jak @ts2.6, w polu argumentu npm.

Zarządzanie zainstalowanymi pakietami w Eksplorator rozwiązań (Node.js)

Pakiety npm są wyświetlane w Eksplorator rozwiązań. Wpisy w węźle npm naśladują zależności w pliku package.json .

Zrzut ekranu przedstawiający węzeł npm w Eksplorator rozwiązań przedstawiający stan instalacji pakietów npm.

Stan pakietu

  • Zainstalowany pakiet — Zainstalowane i wymienione w package.json
  • Pakiet nadmiarowy — Zainstalowane, ale nie są jawnie wymienione w package.json
  • Brak pakietu - Nie zainstalowano, ale wymienione w package.json

Kliknij prawym przyciskiem myszy węzeł npm, aby wykonać jedną z następujących akcji:

  • Zainstaluj nowe pakiety npm Otwiera interfejs użytkownika w celu zainstalowania nowych pakietów.
  • Zainstaluj pakiety npm Uruchamia polecenie npm install, aby zainstalować wszystkie pakiety wymienione w package.json. (Uruchamia npm installplik .)
  • Zaktualizuj pakiety npm Packages Updates do najnowszych wersji, zgodnie z semantycznym zakresem przechowywania wersji (SemVer) określonym w package.json. (Uruchamia npm update --save.). Zakresy SemVer są zwykle określane przy użyciu "~" lub "^". Aby uzyskać więcej informacji, package.json konfiguracji.

Kliknij prawym przyciskiem myszy węzeł pakietu, aby wykonać jedną z następujących akcji:

  • Zainstaluj pakiety npm uruchamia polecenie npm install, aby zainstalować wersję pakietu wymienioną w package.json. (Uruchamia npm installplik .)
  • Zaktualizuj pakiety npm aktualizuje pakiet do najnowszej wersji, zgodnie z zakresem SemVer określonym w package.json. (Uruchom npm update --saveplik .) Zakresy SemVer są zwykle określane przy użyciu "~" lub "^".
  • Odinstaluj pakiety npm Odinstaluje pakiet i usuwa go z package.json (działa npm uninstall --save).

Uwaga

Aby uzyskać pomoc dotyczącą rozwiązywania problemów z pakietami npm, zobacz Rozwiązywanie problemów.

Użyj polecenia npm w oknie interaktywnym Node.js (Node.js)

Możesz również użyć .npm polecenia w oknie interaktywnym Node.js do wykonywania poleceń npm. Aby otworzyć okno, kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierz polecenie Otwórz Node.js interakcyjne okno (lub naciśnij Ctrl + K, N).

W oknie możesz użyć poleceń, takich jak następujące, aby zainstalować pakiet:

.npm install azure@4.2.3

Napiwek

Domyślnie narzędzie npm zostanie wykonane w katalogu głównym projektu. Jeśli masz wiele projektów w rozwiązaniu, określ nazwę lub ścieżkę projektu w nawiasach kwadratowych. .npm [MyProjectNameOrPath] install azure@4.2.3

Napiwek

Jeśli projekt nie zawiera pliku package.json, użyj polecenia .npm init -y , aby utworzyć nowy plik package.json z domyślnymi wpisami.

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.

  • W przypadku projektów Node.js należy mieć zainstalowane obciążenie programistyczne Node.js na potrzeby obsługi programu npm. Narzędzie npm wymaga Node.js. Jeśli nie masz zainstalowanej Node.js, zalecamy zainstalowanie wersji LTS z witryny internetowej Node.js , aby uzyskać najlepszą zgodność ze strukturami zewnętrznymi i bibliotekami.