Учебник. Создание приложения Node.js и Express в Visual Studio

  • Статья

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

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

  • Что такое Node.js?

    Node.js — это серверная среда выполнения JavaScript, выполняющая код JavaScript.

  • Что такое npm?

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

  • Что такое Express?

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

Необходимые компоненты

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

  • Visual Studio 2022 версии 17.4 или более поздней версии с установленной рабочей нагрузкой ASP.NET и веб-разработки . Перейдите на страницу скачиваемых материалов Visual Studio, чтобы установить ее бесплатно. Если вам нужно установить рабочую нагрузку и у вас уже есть Visual Studio, перейдите в раздел Средства>Получить средства и компоненты..., после чего запустится Visual Studio Installer. Выберите рабочую нагрузку ASP.NET и разработка веб-приложений, а затем щелкните Изменить.
  • npm (https://www.npmjs.com/), который входит в состав Node.js
  • npx (https://www.npmjs.com/package/npx).

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

  1. В окне запуска (чтобы открыть его, щелкните Файл>Окно запуска) выберите Создание нового проекта.

    Create a new project

  2. Найдите Express в строке поиска в верхней части и выберите приложение JavaScript Express.

    Choose a template

  3. Присвойте имена проекту и решению.

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

Параметры проекта по умолчанию позволяют выполнить сборку и отладку проекта. Но если вам нужно изменить параметры, щелкните правой кнопкой мыши проект в Обозреватель решений, выберите Свойства, а затем перейдите в раздел Сборка или Отладка.

Примечание.

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

Сборка проекта

Выберите Сборка>Собрать решение, чтобы собрать проект.

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

Нажмите клавишу F5 или кнопку Запуск в верхней части окна, чтобы открыть командную строку.

  • npm под управлением команды node ./bin/www

Примечание.

Проверьте наличие в консоли сообщений, например сообщения с указанием обновить версию Node.js.

Затем появится базовое приложение Express!

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

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

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

Отладка процесса узла

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

  • localhost (Edge)
  • localhost (Chrome)
  • Отладка Dev Env
  • Запуск узла и браузера

Перейдите вперед и выберите параметр "Запустить узел" и "Браузер ". Теперь, прежде чем нажать клавишу F5 или снова нажать кнопку "Пуск ", установите точку останова в index.js (в папке маршрутов ), выбрав левую полоску перед следующей строкой кода: res.render('index', { title: 'Express' });

Совет

Вы также можете поместить курсор в строку кода и нажать клавишу F9 , чтобы переключить точку останова для этой строки.

Затем нажмите клавишу F5 или выберите "Начать отладку отладки", чтобы отладить>приложение.

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

Завершив проверку состояния, нажмите клавишу F5 , чтобы продолжить работу, и приложение должно загрузиться должным образом.

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

Общие сведения о launch.json

Файл launch.json в настоящее время находится в папке VSCODE . Если в Обозреватель решений не отображается папка 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 отлаживать только процесс внешнего браузера, а процесс node будет запущен без подключения отладчика, то есть любые точки останова, заданные в процессе узла, не будут привязываться.

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

В начале этого раздела вы закрыли окно командной строки для установки точек останова в процессе Node. Чтобы процесс узла был отлаживаемым, его необходимо перезапустить с присоединенным отладчиком. Если не отладочный процесс узла не выполняется, попытка запустить процесс Узла в режиме отладки (без перенастройки порта) завершится ошибкой.

Примечание.

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

Третья запись в файле launch.json указывает node тип отладки и должен выглядеть примерно так:

    {
      "name": "Debug Dev Env",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

Эта запись запустит только процесс узла в режиме отладки. Браузер не будет запущен.

Четвертая запись, указанная в файле launch.json*, является следующей конфигурацией составного запуска.

    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Debug Dev Env",
        "localhost (Edge)"
      ]
    }

Эта составная конфигурация совпадает с конфигурацией составного запуска vscode и позволяет отлаживать интерфейсную и серверную части. Вы можете увидеть, что он просто ссылается на отдельные конфигурации запуска для процессов узла и браузера.

В конфигурации запуска можно использовать множество других атрибутов. Например, можно скрыть конфигурацию из раскрывающегося списка, но при этом можно ссылаться, задав hidden атрибут в объекте presentation значение true.

    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }

Нажмите кнопку " Параметры " для списка атрибутов, которые можно использовать для улучшения возможностей отладки. Обратите внимание, что на данный момент поддерживаются только конфигурации запуска . Любая попытка использовать конфигурацию подключения приведет к сбою развертывания.