Руководство. Создание приложения Node.js и Express в Visual Studio

Статья
01/26/2025

В этой статье показано, как использовать Visual Studio для создания базового веб-приложения Node.js, использующего платформу Express.

Node.js — это серверная среда выполнения JavaScript, которая выполняет код JavaScript. По умолчанию Node.js использует диспетчер пакетов npm, чтобы упростить использование и совместное использование Node.js библиотек исходного кода. Диспетчер пакетов npm упрощает установку, обновление и удаление библиотек.

Express — это платформа веб-приложений сервера, которая Node.js используется для создания веб-приложений. При использовании Express существует множество различных способов создания пользовательского интерфейса. Реализация, предоставляемая в этом руководстве, использует обработчик шаблонов по умолчанию генератора приложений Express, называемый Pug, для отрисовки внешнего интерфейса.

В этом руководстве вы:

Создание приложения Node.js с помощью шаблона JavaScript
Создание приложения и проверка выполняемого процесса
Отладка приложения в отладчике Visual Studio

Необходимые условия

Visual Studio 2022 версии 17.12 или более поздней версии с установленной рабочей нагрузкой ASP.NET и веб-разработки.
- Чтобы бесплатно установить Visual Studio, перейдите на страницу загрузки Visual Studio.
- Если у вас уже есть Visual Studio, можно установить рабочую нагрузку из интерактивной среды разработки (IDE):
  1. Выберите Инструменты>Получить инструменты и функции.
  2. В установщике Visual Studio выберите вкладку Рабочие нагрузки.
  3. Выберите рабочую нагрузку ASP.NET и веб-разработки, а затем выберите Изменить.
  4. Следуйте инструкциям и завершите установку.
Node.js с диспетчером пакетов npm и пакетом npx.

Вы можете проверить установку Node.js с помощью команды node -v. Выходные данные команды должны отображать установленную версию Node.js, например v23.4.0. Дополнительные сведения см. в разделе Скачивание и установка Node.js и npm.
- Диспетчер пакетов npm включен в установку Node.js. Проверьте установку с помощью команды npm -v. Выходные данные команды должны отображать установленную версию диспетчера пакетов, например 10.9.2.
- Пакет npx является частью npm CLI. Подтвердите установку пакета с помощью команды npx -v. Выходные данные команды должны отображать установленную версию пакета, например 10.9.2.

Создание приложения

Выполните следующие действия, чтобы создать новое приложение Node.js в Visual Studio:

В окне запуска Visual Studio (окно запуска>файла) выберите Создать проект:
В поле поиска введите команду Expressи выберите шаблон JavaScript Express Application в списке результатов:
Выберите Далее, чтобы перейти на страницу конфигурации.
Введите имя проекта и имя решения для нового приложения. Выберите расположение по умолчанию или перейдите на другой путь в вашей рабочей среде.
Выберите Создать, чтобы создать проект Node.js.

Visual Studio создает новый проект и открывает иерархию проектов в обозревателе решений .

Просмотр свойств проекта

Параметры проекта по умолчанию позволяют создавать и отлаживать проект. При необходимости можно изменить параметры.

В обозревателе решенийщелкните правой кнопкой мыши проект и выберите Свойства. Вы также можете получить доступ к этим свойствам, выбрав в меню Project>свойства ExpressProject.
В области свойства проекта перейдите в раздел сборки и укажите свойства по вашему усмотрению.
Чтобы настроить параметры отладки, выберите Отладка>Свойства отладки ExpressProject.

Заметка

Файл launch.json сохраняет параметры запуска, связанные с действием запуска на панели инструментов отладки. В настоящее время launch.json должен находиться в папке .vscode.

Создание проекта

Постройте проект, выбрав Build>Build Solution.

Запуск приложения

Запустите новое приложение, выбрав Ctrl + F5 или Запустить без отладки (значок с изображением зеленой стрелки) на панели инструментов.

Откроется терминал и отображается команда выполнения:

> expressproject@0.0.0 start
> node ./bin/www

GET / 200 29342.066 ms - 170
GET /stylesheets/style.css 200 18.967 ms - 111

Заметка

Проверьте выходные данные терминала для сообщений. Также проверьте панель выходных данных в Visual Studio. Подождите инструкций по обновлению вашей версии Node.js.

При успешном запуске приложения откроется окно браузера с приложением Express:

снимок экрана, на котором показано работающее приложение Express в браузере.

Отладка приложения

Теперь вы готовы изучить способы отладки приложения.

Если приложение по-прежнему работает, выберите SHIFT+ F5, чтобы завершить текущий сеанс или остановить (красный квадратный значок) на панели инструментов отладки. Вы можете заметить, что завершение сеанса закрывает браузер, в котором отображается приложение, но окно терминала, на котором выполняется процесс Node, остается открытым. На данный момент, просто закройте все открытые окна. Далее в этой статье рассматриваются сценарии, когда может потребоваться оставить процесс узла запущенным.

Отладка процесса Node.js

Раскрывающийся список слева от действия "Пуск" отображает доступные параметры запуска для приложения:

localhost (Edge)
localhost (Chrome)
Запуск ExpressProject
Запуск узла и браузера

Выполните следующие действия, чтобы выполнить отладку процесса Узла для приложения:

В раскрывающемся списке запуска выберите узел запуска и браузер.
В обозревателе решений разверните папку маршрутов и откройте файл index.js.
В редакторе кода задайте точку останова в файле index.js:
1. Найдите оператор кода res.render('index', { title: 'Express' });.
2. Выберите в левой области в строке инструкции. Visual Studio добавляет красный круг в полях, чтобы указать точку останова.
Совет / Чаевые

Вы также можете поместить курсор в строку кода и выбрать F9, чтобы переключить точку останова для этой строки.
Запустите приложение в отладчике, выбрав F5 или Начать отладку (значок зелёной стрелки) на панели инструментов отладки.

Visual Studio запускает выполнение приложения. Когда отладчик достигает заданной точки останова, процесс отладки приостанавливается.
При приостановке выполнения можно проверить состояние приложения. Наведите указатель мыши на переменные и проверьте их свойства.
Когда вы будете готовы продолжить, выберите F5. Обработка продолжается, и приложение открывается в браузере.

На этот раз, если выбрать остановить, обратите внимание, что окна браузера и терминала закрываются. Чтобы понять, почему поведение отличается, ознакомьтесь с файлом launch.json.

Проверка файла launch.json

Выполните следующие действия, чтобы проверить файл launch.json проекта:

В Обозревателе решений разверните папку .vscode и откройте файл launch.json.

Совет / Чаевые

Если папка .vscode не отображается в обозревателе решений, выберите действие показать все файлы на панели инструментов обозревателя решений .
Просмотрите файл в редакторе кода. Если у вас есть опыт работы с Visual Studio Code, launch.json файл, вероятно, выглядит знакомым. Файл launch.json в этом проекте соответствует файлу, используемому Visual Studio Code для обозначения конфигураций запуска, используемых для отладки. Каждая запись задает один или несколько целевых объектов для отладки.
Проверьте первые две записи в файле. Эти записи определяют поведение для различных браузеров в Интернете:
```
    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }
```
Поддерживаемые браузеры указываются с помощью свойства type. Если вы запускаете приложение только с типом браузера в качестве единственной цели отладки, Visual Studio отлаживает только процесс фронт-энда браузера. Процесс узла запускается без подключения отладчика. Visual Studio не привязывает каких-либо точек останова, заданных в процессе Node.

Заметка

В настоящее время edge и chrome являются единственными поддерживаемыми типами браузеров для отладки.

После завершения сеанса процесс Node продолжает выполняться по задумке. Процесс намеренно остается запущенным, когда браузер является целевым объектом отладки. Если работа выполняется исключительно на фронтенде, то непрерывная работа бэкенд-процесса упрощает рабочий процесс разработки.

В начале этого разделавы закрыли окно терминала, чтобы можно было установить точки останова в процессе Node.js. Чтобы Visual Studio мог отлаживать процесс Node.js, процесс должен быть перезапущен с подключённым отладчиком. Если неотлаживаемый процесс Node остается запущенным, попытка запустить процесс Node в режиме отладки (без перенастройки порта) завершается ошибкой.
Просмотрите третью запись в файле launch.json. Эта запись указывает node в качестве типа отладки:
```
    {
      "name": "Launch ExpressProject",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }
```
Третья запись запускает только процесс Node в режиме отладки. Visual Studio не запускает браузер.
Проверьте четвертую запись в файле launch.json, который определяет конфигурацию составного запуска:
```
    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Launch ExpressProject",                   
        "localhost (Edge)"
      ]
    }
```
Эта составная конфигурация аналогична конфигурации составной конфигурации запуска Visual Studio Code. При выборе этой конфигурации можно отлаживать интерфейсную и серверную части. Обратите внимание, что определение просто ссылается на отдельные конфигурации запуска для процессов узла и браузера.

В конфигурации запуска можно использовать множество других атрибутов. Например, можно скрыть конфигурацию, чтобы убрать её из раскрывающегося списка Пуск, но при этом разрешить ссылки на конфигурацию, установив атрибут hidden в объекте presentation в true.
```
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }
```
Настройте параметры с помощью поддерживаемых атрибутов для улучшения возможностей отладки. В настоящее время поддерживаются только конфигурации запуска. Любая попытка использовать конфигурацию подключения и приводит к сбою развертывания. Дополнительные сведения см. в опциях.

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

Руководство. Создание приложения Node.js и Express в Visual Studio

Необходимые условия

Создание приложения

Просмотр свойств проекта

Создание проекта

Запуск приложения

Отладка приложения

Отладка процесса Node.js

Проверка файла launch.json

Обратная связь

Дополнительные ресурсы

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

Руководство. Создание приложения Node.js и Express в Visual Studio

Необходимые условия

Создание приложения

Просмотр свойств проекта

Создание проекта

Запуск приложения

Отладка приложения

Отладка процесса Node.js

Проверка файла launch.json

Связанные ссылки

Обратная связь

Дополнительные ресурсы