Поделиться через

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

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

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

Это важно

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

Проект CLI (.esproj)

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

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

Открытие диспетчера пакетов из обозревателя решений

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

Установка нового пакета npm для esproj

проекты Node.js

Для Node.js проектов (Njsproj) можно выполнить следующие задачи:

Эти функции работают вместе и синхронизируются с системой проекта и файломpackage.json в проекте.

Предпосылки

Для добавления поддержки npm в проект требуется пакет для разработки Node.js и среда выполнения Node.js. Подробные инструкции см. в разделе "Создание Node.js" и "Экспресс-приложение".

Замечание

Для существующих проектов Node.js используйте шаблон решения Из существующего кода Node.js или тип проекта Открыть папку (Node.js) для включения npm в проекте.

Установка пакетов из обозревателя решений (Node.js)

Для Node.js проектов проще всего установить пакеты npm через окно установки пакета npm. Чтобы получить доступ к этому окну, щелкните правой кнопкой мыши узел npm в проекте и выберите "Установить новые пакеты npm".

Установка нового пакета npm для Node.js

В этом окне можно найти пакет, указать параметры и установить.

Снимок экрана: диалоговое окно

  • Тип зависимостей — выбор между стандартными, разработками и необязательными пакетами. Стандарт указывает, что пакет является зависимостью среды выполнения, в то время как разработка указывает, что пакет требуется только во время разработки.
  • Добавьте в package.json — рекомендуется. Этот настраиваемый параметр не рекомендуется.
  • Выбранная версия— выберите версию пакета, который требуется установить.
  • Другие аргументы npm— укажите другие стандартные аргументы npm . Например, можно ввести значение версии, например @~0.8 установить определенную версию, которая недоступна в списке версий.

Вы можете видеть ход установки в выходных данных npm в окне Вывод (чтобы открыть окно, выберите "Просмотреть>Вывод" или нажмите клавиши Ctrl + Alt + O). Это может занять некоторое время.

Выходные данные npm

Подсказка

Вы можете искать пакеты с областью, добавляя интересующую вас область в начало поискового запроса, например, введите @types/mocha чтобы найти файлы определения TypeScript для mocha. Кроме того, при установке определений типов для TypeScript можно указать целевую версию TypeScript, указав версию, например @ts2.6в поле аргумента npm.

Управление установленными пакетами в обозревателе решений (Node.js)

Пакеты npm отображаются в обозревателе решений. Записи под узлом npm имитируют зависимости в файле package.json .

Снимок экрана: узел npm в обозревателе решений, показывающий состояние установки пакетов npm.

Состояние пакета

  • Установленный пакет — установлен и указан в package.json
  • Дополнительный пакет — установлен, но не указан явным образом в package.json
  • Отсутствующий пакет — не установлен, но указан в package.json

Щелкните правой кнопкой мыши узел npm , чтобы выполнить одно из следующих действий:

  • Установка новых пакетов npm Открывает пользовательский интерфейс для установки новых пакетов.
  • Установка пакетов npm Запускает команду установки npm, чтобы установить все пакеты, перечисленные в package.json. (Выполняется npm install.)
  • Обновление пакетов npm Обновляет пакеты до последних версий в соответствии с диапазоном семантического управления версиями (SemVer), указанным в package.json. (Выполняется npm update --save.). Диапазоны SemVer обычно задаются с помощью "~" или "^". Дополнительные сведения см. в конфигурации файла package.json.

Щелкните правой кнопкой мыши узел пакета, чтобы выполнить одно из следующих действий:

  • Установка пакетов npm Запускает команду установки npm, чтобы установить версию пакета, указанную в package.json. (Выполняется npm install.)
  • Обновление пакетов npm Обновляет пакет до последней версии в соответствии с диапазоном SemVer, указанным в package.json. (Запуск npm update --save.) Диапазоны SemVer обычно задаются с помощью "~" или "^".
  • Удаление пакетов npm Удаляет пакет и удаляет его из package.json (выполняется npm uninstall --save.)

Замечание

Сведения об устранении проблем с пакетами npm см. в разделе "Устранение неполадок".

Используйте команду NPM в интерактивном окне Node.js (Node.js)

Вы также можете использовать .npm команду в интерактивном окне Node.js для выполнения команд npm. Чтобы открыть окно, щелкните проект правой кнопкой мыши в обозревателе решений и выберите "Открыть Node.js интерактивное окно " (или нажмите клавиши CTRL + K, N).

В окне можно использовать следующие команды для установки пакета:

.npm install azure@4.2.3

Подсказка

По умолчанию npm будет выполняться в домашнем каталоге проекта. Если в решении есть несколько проектов, укажите имя или путь проекта в квадратных скобках. .npm [MyProjectNameOrPath] install azure@4.2.3

Подсказка

Если проект не содержит файл package.json, используйте .npm init -y для создания файла package.json с записями по умолчанию.

ASP.NET Основные проекты

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

Замечание

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

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

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

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

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

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

    Замечание

    Узел npm доступен для большинства типов проектов core ASP.NET, включая Blazor. Для проектов MAUI Blazor необходимо использовать командную строку npm, так как в обозревателе решений отсутствует узел 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 в обозревателе решений может не отображаться после сборки проекта. Чтобы сделать узел видимым снова, щелкните правой кнопкой мыши узел проекта и выберите "Выгрузить проект". Затем щелкните правой кнопкой мыши узел проекта и выберите команду "Перезагрузить проект".

  • Для Node.js проектов необходимо установить рабочую нагрузку разработки Node.js для поддержки npm. для npm требуется Node.js. Если у вас нет Node.js, рекомендуется установить версию LTS с веб-сайта Node.js для обеспечения оптимальной совместимости с внешними платформами и библиотеками.