Управление пакетами npm в Visual Studio

npm позволяет устанавливать пакеты для приложений Node.js и ASP.NET Core, а также управлять ими. Visual Studio позволяет легко взаимодействовать с npm и использовать команды npm через пользовательский интерфейс или напрямую. Если вы не знакомы с npm и хотите узнать больше, перейдите на страницу документации npm.

Интеграция Visual Studio с npm зависит от типа проекта.

• Проекты на основе CLI (.esproj)
• ASP.NET Core
• Открытие папки (Node.js)

Важно!

npm ожидает найти папку node_modules и файл package.json в корневом каталоге проекта. Если структура папок вашего приложения отличается, ее можно изменить, чтобы управлять пакетами npm с помощью Visual Studio.

Проект на основе CLI (.esproj)

Начиная с Visual Studio 2022 диспетчер пакетов npm доступен для проектов на основе CLI, поэтому теперь можно скачать модули npm аналогично тому, как вы скачиваете пакеты NuGet для проектов ASP.NET Core. Затем можно изменять и удалять пакеты с помощью package.json.

Чтобы открыть диспетчер пакетов, в Обозревателе решений щелкните правой кнопкой узел npm в своем проекте.

Затем вы можете выполнить поиск пакетов npm, выбрать один из них и установить, выбрав команду Установить пакет.

Проекты ASP.NET Core

Для таких проектов, как ASP.NET Core, можно добавить в проект поддержку npm и использовать npm для установки пакетов.

Примечание.

Для установки клиентских файлов JavaScript и CSS в проектах ASP.NET Core вместо npm можно также использовать диспетчер библиотек или yarn. Один из этих вариантов может потребоваться, если требуется интеграция с MSBuild или dotnet CLI для управления пакетами, которая не предоставляется npm.

Если в проекте еще нет файла package.json, добавьте его, чтобы включить поддержку npm. Добавьте файл package.json в проект.

1. Чтобы добавить файл package.json, щелкните правой кнопкой мыши проект в Обозревателе решений и выберите Добавить>Новый элемент (или нажмите сочетание клавиш CTL + SHIFT + A). Используя поле поиска, найдите файл npm, выберите Файл конфигурации npm , оставьте имя по умолчанию и нажмите кнопку Добавить.

2. Включите один или несколько пакетов npm в раздел dependencies или devDependencies файла package.json. Например, в файл можно добавить следующие пакеты:

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

   При сохранении файла Visual Studio добавляет пакет в узел Зависимости / npm в обозревателе решений. Если узел не отображается, щелкните правой кнопкой мыши файл package.json и выберите пункт Восстановить пакеты. Чтобы просмотреть состояние установки пакета, выберите выходные данные npm в окне вывода.

   С помощью package.jsonпакетов npm можно настроить . Откройте package.json напрямую или щелкните правой кнопкой мыши узел npm в Обозревателе решений и выберите Открыть файл package.json.

Устранение неполадок при работе с пакетами npm

• При возникновении ошибок при создании приложения или транскомпиляции кода TypeScript проверьте известные несовместимости пакета NPM, возможно они стали причиной ошибок. Чтобы определить ошибки, проверьте окно вывода npm при установке пакетов, как описано выше в этой статье. Например, если одна или несколько версий пакета npm устарела и приводит к ошибке, может потребоваться установить более последнюю версию для устранения ошибок. Дополнительные сведения об использовании package.json для контроля версий пакетов npm см. в разделе Конфигурация package.json.

• В некоторых сценариях ASP.NET Core Обозреватель решений могут не отображать правильное состояние установленных пакетов npm из-за известной проблемы, описанной здесь. Например, пакет может отображаться как не установлен при его установке. В большинстве случаев обозреватель решений можно обновить, удалив файл package.json, перезапустив Visual Studio и повторно добавив файл package.json, как описано выше в этой статье. Или при установке пакетов можно использовать окно вывода npm для проверки состояния установки.

• В некоторых сценариях ASP.NET Core узел npm в Обозреватель решений может не отображаться после сборки проекта. Чтобы снова сделать узел видимым, щелкните правой кнопкой мыши узел проекта и выберите команду Выгрузить проект. Затем щелкните правой кнопкой мыши узел проекта и выберите команду Перезагрузить проект.