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

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

В этом руководстве описано следующее:

• Создание проекта Node.js
• Добавление пакетов npm
• Добавление кода React в приложение
• Транскомпиляция JSX
• Подключение отладчика

Важно!

Начиная с Visual Studio 2022, можно также создать проект React с помощью рекомендуемого типа проекта на основе CLI. Некоторые сведения в этой статье относятся только к типу проектов Node.js (расширение файла NJSPROJ). Шаблон, используемый в этой статье, больше недоступен, начиная с Visual Studio 2022 версии 17.8 ( предварительная версия 2).

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

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

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

• Что такое npm?

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

• Что такое React?

  React — это интерфейсная платформа для создания пользовательского интерфейса.

• Что такое JSX?

  JSX — это расширение синтаксиса JavaScript. Обычно оно используется с React для описания элементов пользовательского интерфейса. Прежде чем запускать код JSX в браузере, его нужно преобразовать в обычный код JavaScript.

• Что такое Webpack?

  Пакет webpack объединяет файлы JavaScript, чтобы они могли работать в браузере, а также может преобразовывать или упаковывать другие ресурсы. Webpack может указать компилятору, например Babel или TypeScript, преобразовать код JSX или TypeScript в обычный код JavaScript.

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

Для работы с этим руководством требуется следующее:

• Visual Studio с установленной рабочей нагрузкой "Разработка Node.js".

  Если вы еще не установили Visual Studio:

  1. Перейдите на страницу загрузки Visual Studio, чтобы установить Visual Studio бесплатно.

  2. В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Установить.

     

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

  1. В Visual Studio выберите Средства>Получить средства и компоненты.

  2. В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Изменить, чтобы скачать и установить рабочую нагрузку.

• Установленная среда выполнения Node.js:

  Если у вас не установлена среда выполнения Node.js, установите версию LTS с веб-сайта Node.js. Версия LTS имеет наилучшую совместимость с другими платформами и библиотеками.

  Средства Node.js в рабочей нагрузке Visual Studio Node.js поддерживают как 32-разрядные, так и 64-разрядные версии архитектуры Node.js. Для Visual Studio нужна только одна версия, а установщик Node.js не может работать с двумя версиями сразу.

  Обычно Visual Studio обнаруживает установленную среду выполнения Node.js автоматически. В противном случае настройте свой проект, чтобы он ссылался на установленную среду выполнения. Для этого сделайте следующее:

  1. После создания проекта щелкните правой кнопкой мыши узел проекта и выберите Панель свойств.

  2. На панели Свойства задайте путь Node.exe для ссылки на глобальную или локальную установку Node.js. Вы можете указать путь к локальному интерпретатору в каждом из своих проектов Node.js.

Это руководство было протестировано с помощью Node.js 18.5.0.

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

Прежде всего, создайте проект веб-приложения Node.js.

1. Откройте Visual Studio и нажмите клавишу ESC, чтобы закрыть начальное окно.

2. Нажмите клавиши CTRL+Q, введите node.js в поле поиска, а затем выберите в раскрывающемся списке элемент Blank Node.js Web Application - JavaScript (Пустое веб-приложение Node.js — JavaScript).

   Хотя в этом руководстве используется компилятор TypeScript, выполнение приведенных в нем инструкций необходимо начинать с шаблона JavaScript.

   Если параметр Пустое веб-приложение Node.js не отображается, нужно установить рабочую нагрузку "Разработка Node.js". Соответствующие инструкции см. в разделе Предварительные требования.

3. В диалоговом окне Настроить новый проект выберите команду Создать.

   Visual Studio создаст новое решение и откроет проект в области справа. Файл проекта server.js откроется в области редактора слева.

4. Структуру проекта можно изучить в Обозревателе решений в области справа.

   

   • На верхнем уровне находится решение (1), имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов.

   • Ваш проект (2) с именем, которое вы указали в диалоговом окне Настроить новый проект, выделен полужирным шрифтом. В файловой системе этот проект представляет собой файл .njsproj в папке вашего проекта.

     Чтобы просмотреть и задать свойства проекта и переменные среды, нажмите клавиши ALT+ВВОД или щелкните проект правой кнопкой мыши и в контекстном меню выберите пункт Свойства. Вы можете использовать и другие средства разработки, так как файл проекта не вносит изменений в источник проекта Node.js.

   • В узле npm (3) представлены все установленные пакеты npm.

     Чтобы найти и установить пакеты npm, щелкните правой кнопкой мыши узел npm. Вы можете установить и обновить пакеты с помощью параметров в package.json, или щелкнув узел npm правой кнопкой мыши.

   • Npm использует файл package.json (4) для управления зависимостями и версиями для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm.

   • Файлы проекта (5) отображаются в узле проекта. Файл запуска проекта server.js выделяется полужирным шрифтом.

     Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.

Добавление пакетов npm

Для правильной работы этого приложения требуются следующие модули npm:

• react
• react-dom
• express
• path
• ts-loader
• typescript
• webpack
• webpack-cli

Установка пакета

1. В Обозревателе решений щелкните правой кнопкой мыши узел npm и выберите элемент Установка новых пакетов npm.

2. В диалоговом окне Установка новых пакетов npm выполните поиск пакета react и щелкните команду Установить пакет.

   

   В диалоговом окне Установка новых пакетов npm можно выбрать для установки текущую версию пакета или указать другую. Если вы решили установить текущую версию, но в дальнейшем столкнулись с непредвиденными ошибками, попробуйте установить версии, перечисленные в следующем шаге.

   В окне Вывод на нижней панели Visual Studio отображается ход установки пакета. Чтобы открыть окно Вывод, щелкните элементы Представление>Вывод или нажмите клавиши CTRL+ALT+O. В поле Показать выходные данные из (в окне Вывод) выберите элемент Npm.

   После установки пакет react появится в Обозревателе решений в узле npm.

   В файле package.json теперь появятся сведения о новом пакете, включая его версию.

Вместо поочередного поиска и добавления остальных пакетов в пользовательском интерфейсе вы можете вставить в файл package.json требуемый код пакета.

1. Из Обозревателя решений откройте package.json в редакторе Visual Studio. Добавьте следующий раздел dependencies перед концом файла:

   "dependencies": {
     "express": "^4.18.2",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1"
   },
   

   Если в файле уже есть раздел dependencies, замените его представленным выше кодом JSON. Дополнительные сведения об использовании файла package.json см. в статье Конфигурация package.json.

2. Чтобы сохранить изменения, нажмите клавиши CTRL+S или щелкните элементы Файл>Save package.json (Сохранить package.json).

3. В Обозревателе решений щелкните правой кнопкой мыши узел npm в своем проекте и выберите элемент Установить пакеты npm.

   Эта команда позволяет установить npm и все пакеты, перечисленные в файле packages.json.

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

   После установки модули npm появятся в узле npm в Обозревателе решений.

   

   Примечание.

   Кроме того, пакеты npm можно установить с помощью командной строки. В Обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите пункт Открыть командную строку здесь. Используйте стандартные команды Node.js для установки пакетов.

Добавление файлов проекта

Теперь добавьте в проект четыре новых файла.

• app.tsx
• webpack-config.js
• index.html
• tsconfig.json

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

1. В Обозревателе решений выберите имя проекта и нажмите клавиши CTRL+SHIFT+A или щелкните правой кнопкой мыши имя проекта и выберите элементы Добавить>Новый элемент.

   Если вы не видите все шаблоны элементов, выберите "Показать все шаблоны" и выберите шаблон элемента.

2. В диалоговом окне Добавление нового элемента выберите JSX-файл TypeScript, введите имя файла app.tsx и нажмите кнопку Добавить или ОК.

3. Повторите эти шаги, чтобы добавить файл JavaScript с именем webpack-config.js.

4. Повторите эти шаги, чтобы добавить HTML-файл с именем index.html.

5. Повторите эти шаги, чтобы добавить файл конфигурации TypeScript JSON с именем tsconfig.json.

Добавление кода приложения

1. В Обозревателе решений откройте файл server.js и замените его содержимое следующим кодом:

   'use strict';
   var path = require('path');
   var express = require('express');
   
   var app = express();
   
   var staticPath = path.join(__dirname, '/');
   app.use(express.static(staticPath));
   
   // Allows you to set port in the project properties.
   app.set('port', process.env.PORT || 3000);
   
   var server = app.listen(app.get('port'), function() {
       console.log('listening');
   });
   

   В приведенном выше коде используется Express для запуска Node.js в качестве сервера веб-приложения. Этот код позволяет настроить использование порта, который указан в свойствах проекта (по умолчанию это 1337). Если нужно открыть свойства проекта, щелкните правой кнопкой мыши имя проекта в Обозревателе решений и выберите пункт Свойства.

2. Откройте файл app.tsx и добавьте следующий код:

   declare var require: any
   
   var React = require('react');
   var ReactDOM = require('react-dom');
   
   export class Hello extends React.Component {
       render() {
           return (
               <h1>Welcome to React!!</h1>
           );
       }
   }
   
   ReactDOM.render(<Hello />, document.getElementById('root'));
   

   В приведенном выше коде используется синтаксис JSX и React для вывода сообщения.

3. Откройте файл index.html и замените раздел body следующим кодом:

   <body>
       <div id="root"></div>
       <!-- scripts -->
       <script src="./dist/app-bundle.js"></script>
   </body>
   

   Эта HTML-страница загружает файл app-bundle.js, который содержит код JSX и React, транскомпилированный в обычный код JavaScript. Пока файл app-bundle.js пуст. В следующем разделе вы настроите параметры для транскомпиляции кода.

Настройка параметров компилятора Webpack и TypeScript

Затем добавьте код конфигурации Webpack в webpack-config.js. Вы добавляете простую конфигурацию Webpack, указывающую входной файл, app.tsx и выходной файл, app-bundle.js, для объединение и транспилирование JSX в обычный JavaScript. Для транскомпиляции также настраиваются некоторые параметры компилятора TypeScript. Этот базовый код конфигурации — это введение в Webpack и компилятор TypeScript.

1. В Обозревателе решений откройте файл webpack-config.js и добавьте приведенный ниже код.

   module.exports = {
       devtool: 'source-map',
       entry: "./app.tsx",
       mode: "development",
       output: {
           filename: "./app-bundle.js"
       },
       resolve: {
           extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
       },
       module: {
           rules: [
               {
                   test: /\.tsx$/,
                   exclude: /(node_modules|bower_components)/,
                   use: {
                       loader: 'ts-loader'
                   }
               }
           ]
       }
   }
   

   Код конфигурации Webpack указывает Webpack использовать загрузчик TypeScript для транспилирования JSX.

2. Откройте файл tsconfig.json и замените его содержимое следующим кодом, в котором задаются параметры компилятора TypeScript:

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "module": "commonjs",
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "jsx": "react"
     },
     "exclude": [
       "node_modules"
     ],
     "files": [
       "app.tsx"
     ]
   }
   

   Этот код указывает app.tsx в качестве исходного файла .

3. Чтобы сохранить все изменения, нажмите клавиши CTRL+SHIFT+S или выберите элементы Файл>Сохранить все.

Транскомпиляция JSX

1. В Обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите пункт Открыть командную строку здесь.

2. В командной строке введите следующую команду Webpack:

   node_modules\.bin\webpack --config webpack-config.js

   В окне командной строки будут выведены результаты.

   

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

   • Используйте точные версии, показанные на предыдущем шаге, если вы еще не сделали

     Или, если вы по-прежнему видите ошибки:

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

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

3. Щелкните правой кнопкой мыши узел проекта в Обозревателе решений, а затем выберите элементы Добавить>Существующая папка.

4. Выберите папку dist, а затем щелкните команду Выбрать папку.

   Visual Studio добавит в проект папку dist, которая содержит файлы app-bundle.js и app-bundle.js.map.

5. Откройте файл app-bundle.js, чтобы просмотреть транскомпилированный код JavaScript.

6. Если будет предложено перезагрузить файлы, которые были изменены в других средствах, выберите вариант Да, для всех.

   

В любое время, когда вы вносите изменения в app.tsx, необходимо повторно запустить команду Webpack. Чтобы автоматизировать этот шаг, можно добавить скрипт сборки для транскомпиляции JSX.

Добавление скрипта сборки для транскомпиляции JSX

Для версий Visual Studio, начиная с Visual Studio 2019, требуется скрипт сборки. Вместо транскомпиляции JSX в командной строке (как показано в предыдущем разделе) можно транскомпилировать JSX при сборке из Visual Studio.

1. Откройте Package.json и добавьте следующий раздел после раздела dependencies:

   "scripts": {
    "build": "webpack-cli --config webpack-config.js"
   }
   

2. Сохранение изменений.

Выполнить приложение

1. На панели инструментов Отладка выберите целевой объект отладки, например веб-сервер (Microsoft Edge) или веб-сервер (Google Chrome).

   

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

2. Чтобы запустить приложение, нажмите клавишу F5, выберите зеленую стрелку или выберите элементы Отладка>Начать отладку.

   Откроется окно консоли Node.js, в котором отображается порт прослушивания отладчика.

   Visual Studio запускает приложение с помощью файла запуска server.js.

   

3. Закройте браузер и окно консоли.

Установите точку останова и запустите приложение.

Точки останова — это самая основная и важная функция надежной отладки. Точка останова указывает, где решение Visual Studio должно приостановить выполняемый код. Так вы сможете проверить значения переменных или поведение памяти, а также узнать, выполняется ли определенная ветвь кода.

1. В файле server.js щелкните в поле слева от объявления staticPath, чтобы установить точку останова:

   

2. Для запуска приложения нажмите клавишу F5 или выберите элементы Отладка>Начать отладку.

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

3. Чтобы продолжить выполнение приложения, нажмите клавишу F5, выберите команду Продолжить на панели инструментов Отладка или щелкните элементы Отладка>Продолжить.

   Если вы хотите использовать Средства для разработчиков в Chrome или средства F12 для Microsoft Edge, нажмите клавишу F12. С их помощью можно изучить модель DOM и взаимодействовать с приложением, используя консоль JavaScript.

4. Закройте браузер и окно консоли.

Установка и срабатывание точки останова в коде React на стороне клиента

В предыдущем разделе вы подключили отладчик к коду Node.js на стороне сервера. Чтобы использовать точки останова на стороне клиента React, необходимо присоединить отладчик к нужному процессу. Ниже описан один из способов настройки отладки в браузере и подключения к процессу.

Включение отладки в браузере

Можно использовать Microsoft Edge или Google Chrome. Закройте все окна целевого браузера. Для Microsoft Edge также отключите все экземпляры Chrome. Так как оба браузера используют одну базу кода Chromium, лучше всего завершить работу обоих браузеров.

Другие экземпляры браузера могут препятствовать его открытию при включенной отладке. Расширения браузера могут препятствовать режиму полной отладки. Для поиска и завершения работы всех работающих экземпляров Chrome может потребоваться диспетчер задач.

Запустите браузер с включенной отладкой.

1. В раскрывающемся списке на панели инструментов Отладка выберите элемент Просмотр с помощью.

2. На экране Просмотр с помощью выберите нужный браузер и нажмите Добавить.

3. В поле Аргументы введите --remote-debugging-port=9222.

4. Присвойте браузеру новое понятное имя, например Edge с отладкой или Chrome с отладкой, а затем нажмите кнопку ОК.

5. На экране Просмотр с помощью выберите элемент Просмотр.

   

• Кроме того, вы можете открыть интерфейс Выполнить, щелкнув левой кнопкой мыши кнопку Пуск в среде Windows, и ввести следующий текст:

  msedge --remote-debugging-port=9222

  or

  chrome.exe --remote-debugging-port=9222

Откроется окно браузера с включенной отладкой. Так как приложение еще не запущено, страница браузера пуста.

Подключение отладчика к сценарию на стороне клиента

1. В редакторе Visual Studio задайте точку останова в исходном коде app-bundle.js или app.tsx.

   • Для app-bundle.js задайте точку останова в функции render(). Чтобы найти функцию render() в файле app-bundle.js, нажмите клавиши CTRL+F или выберите элементы Правка>Найти и заменить>Быстрый поиск и введите render в поле поиска.

     

   • Для app.tsx установите точку останова внутри функции render() в инструкции return.

     

     Если вы задаете точку останова в app.tsx, обновите webpack-config.js, чтобы заменить приведенный ниже код. После этого сохраните изменения.

     Замените этот код:

     output: {
         filename: "./app-bundle.js",
     },
     

     Вставьте следующий код:

     output: {
         filename: "./app-bundle.js",
         devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
     },
     

     Этот параметр, предназначенный только для разработки, включает отладку в Visual Studio. По умолчанию ссылки Webpack в файл карты источника включают префикс webpack:/// , который предотвращает поиск исходного файла app.tsx в Visual Studio. Этот параметр переопределяет созданные ссылки в файле сопоставителя с исходным кодом, app-bundle.js.map, при сборке приложения. В частности, этот параметр изменяет ссылку на исходный файл с webpack:///./app.tsx на ./app.tsx, что позволяет выполнять отладку.

2. Выберите свой целевой браузер в качестве целевого объекта отладки в Visual Studio, нажмите клавиши CTRL+F5 или выберите элементы Отладка>Запуск без отладки, чтобы запустить приложение в браузере.

   Если вы ранее создали ярлык браузера с конфигурацией отладки, выберите этот браузер в качестве целевого объекта отладки.

   Приложение откроется в новой вкладке браузера.

3. Выберите элементы Отладка>Подключиться к процессу или нажмите клавиши CTRL+ALT+P.

   Совет

   После первого подключения можно быстро подключаться к этому же процессу, выбрав элементы Отладка>Повторно подключиться к процессу или нажав клавиши SHIFT+ALT+P.

4. В диалоговом окне Присоединить к процессу получите отфильтрованный список экземпляров браузера для присоединения.

   Убедитесь в том, что в поле Подключить к отображается правильный отладчик для вашего целевого браузера — JavaScript (Chrome) или JavaScript (Microsoft Edge - Chromium) Введите chrome или edge в поле фильтра, чтобы отфильтровать результаты.

5. Выберите процесс браузера с соответствующим портом узла (localhost в этом примере). Номер порта 1337 или localhost также могут отображаться в поле Заголовок, чтобы вам было проще выбрать нужный процесс.

6. Выберите Вложить.

   В следующем примере показано окно Подключиться к процессу для обозревателя Microsoft Edge.

   

   Совет

   Если отладчик не присоединяется и вы видите сообщение Unable to attach to the process. An operation is not legal in the current state (Не удалось подключиться к процессу. Операция недопустима в текущем состоянии) с помощью диспетчера задач закройте все экземпляры целевого браузера перед запуском браузера в режиме отладки. Возможно, в браузере выполняются расширения, которые препятствуют переходу в режим полной отладки.

7. Так как код с точкой останова уже был выполнен, обновите страницу браузера, чтобы точка останова была достигнута еще раз.

   В зависимости от используемой среды, состояния браузера и выполненных ранее шагов вы можете попасть в точку останова в app-bundle.js или в сопоставленном с ним расположении в app.tsx. В любом случае вы можете выполнять пошаговую отладку кода и просматривать переменные.

   Когда отладчик приостановит выполнение, вы можете изучить состояние приложения, наводя указатель мыши на переменные и используя окна отладчика. Для пошагового прохождения кода можно использовать режим Отладка>Шаг с заходом (клавиша F11) или Отладка>Шаг с обходом (клавиша F10). Чтобы продолжить выполнение кода, нажмите клавишу F5 или выберите команду Продолжить. Дополнительные сведения об основных функциях отладки см. в разделе Первое знакомство с отладчиком.

   • Если вам не удается попасть в точку останова в файле app.tsx, повторите процесс с операцией Подключиться к процессу, которая подключает отладчик, как описано в предыдущих шагах. Убедитесь, что ваша среда настроена правильно:

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

     • Убедитесь, что сопоставитель с исходным кодом содержит ссылку на ./app.tsx, а не webpack:///./app.tsx, что не позволяет отладчику Visual Studio найти app.tsx.

     Кроме того, можно использовать инструкцию debugger; в файле app.tsx или задать точки останова в средствах для разработчиков (Chrome) или в средствах F12 (Microsoft Edge).

   • Если вам не удается попасть в точку останова в файле app-bundle.js, удалите файл сопоставителя с исходным кодом app-bundle.js.map.

Следующие шаги

Развертывание приложения в службе приложений Linux