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

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

В этом руководстве вы узнаете, как:

Создание проекта Node.js
Добавление пакетов npm
Добавление кода React в приложение
Transpile JSX
Подключение отладчика

Это важно

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

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

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

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

Диспетчер пакетов по умолчанию для Node.js — npm. Диспетчер пакетов упрощает публикацию и совместное использование 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 выберите рабочую нагрузку разработкиNode.js и нажмите кнопку "Установить".
Если у вас установлена Visual Studio, но требуется рабочая нагрузка Node.js:
1. В Visual Studio перейдите в раздел «Сервис»>«Получать инструменты и функции».
2. В установщике Visual Studio выберите рабочую нагрузку для разработки Node.js и нажмите Изменить, чтобы скачать и установить рабочую нагрузку.
Установленная среда выполнения Node.js:

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

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

Visual Studio обычно обнаруживает установленную среду выполнения Node.js автоматически. В противном случае можно настроить проект для ссылки на установленную среду выполнения:
1. После создания проекта щелкните правой кнопкой мыши узел проекта и выберите "Свойства".
2. В области свойств задайте путьNode.exe для ссылки на глобальную или локальную установку Node.js. Вы можете указать путь к локальному интерпретатору в каждом из проектов Node.js.

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

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

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

Откройте Visual Studio.
Создание проекта

Нажмите Esc, чтобы закрыть начальное окно. Введите CTRL+Q, чтобы открыть поле поиска, введите Node.js, а затем выберите Пустое веб-приложение Node.js на JavaScript. (Хотя в этом руководстве используется компилятор TypeScript, действия требуют, чтобы вы начинали с шаблона JavaScript.)

В появившемся диалоговом окне выберите Создать.

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

Visual Studio создает новое решение и открывает проект.

Выделенный полужирным шрифтом — это ваш проект с именем, которое вы указали в диалоговом окне 'Новый проект'. В файловой системе этот проект представлен файлом .njsproj в папке проекта. Свойства и переменные среды, связанные с проектом, можно задать, щелкнув проект правой кнопкой мыши и выбрав свойства (или нажмите клавиши ALT + ВВОД). Вы можете выполнять циклический обход с другими средствами разработки, так как файл проекта не вносит пользовательские изменения в источник проекта Node.js.

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

(3) Узел npm отображает все установленные пакеты npm. Вы можете щелкнуть правой кнопкой мыши узел npm, чтобы искать и устанавливать пакеты npm с использованием диалогового окна или установить и обновить пакеты, используя параметры в package.json и варианты правого щелчка в узле npm.

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

(5) Файлы проекта, такие как server.js, отображаются под узлом проекта. server.js — файл запуска проекта, поэтому он отображается полужирным шрифтом. Вы можете задать файл запуска, щелкнув правой кнопкой мыши файл в проекте и выбрав "Задать" в качестве Node.js файла запуска.

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

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

реагировать
React-dom
экспресс
путь
ts-loader
машинописный текст
webpack
webpack-cli

Чтобы установить пакет, выполните приведенные действия.

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

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

В окне вывода в нижней области Visual Studio отображается ход установки пакета. Откройте окно вывода, выбрав "Вид>" или нажав клавиши CTRL++. В поле "Показать выходные данные" окна "Вывод " выберите Npm.

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

Файл проекта package.json обновляется с информацией о новом пакете, включая версию пакета.

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

В обозревателе решений откройте 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 конфигурации.
Нажмите Ctrl+S или выберите в меню Файл> пункт Сохранить package.json, чтобы сохранить изменения.
В обозревателе решений щелкните правой кнопкой мыши узел npm в проекте и выберите "Установить пакеты npm".

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

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

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

Замечание

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

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

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

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

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

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

Если вы не видите все шаблоны элементов, выберите показать все шаблоны, а затем выберите шаблон элемента.
В диалоговом окне "Добавить новый элемент" выберите TypeScript JSX File, введите имя app.tsx и нажмите кнопку "Добавить " или "ОК".
Повторите эти действия, чтобы добавить файл JavaScript с именем webpack-config.js.
Повторите эти действия, чтобы добавить HTML-файл с именем index.html.
Повторите эти действия, чтобы добавить файл конфигурации JSON TypeScript с именем tsconfig.json.

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

В обозревателе решений откройте 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. Если необходимо открыть свойства проекта, щелкните правой кнопкой мыши имя проекта в обозревателе решений и выберите "Свойства".

Откройте 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 для отображения сообщения.

Откройте index.html и замените body раздел следующим кодом:
```
<body>
    <div id="root"></div>
    
    <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.

В обозревателе решений откройте 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 задаёт использование загрузчика TypeScript для транспиляции JSX.

Откройте 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 в качестве исходного файла.

Нажмите клавиши CTRL+SHIFT+S или нажмите кнопку"Сохранить все">, чтобы сохранить все изменения.

Транспилировать JSX

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

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

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

Если вы видите ошибки вместо предыдущих выходных данных, перед работой приложения их необходимо устранить. Если версии пакета npm отличаются от версий, указанных в этом руководстве, это может привести к ошибкам. Чтобы устранить ошибки, попробуйте следующее:
- Используйте точные версии, показанные на более раннем шаге, если вы этого еще не сделали.
  
  Или, если вы по-прежнему видите ошибки:
- Установите последние версии пакетов npm, щелкнув правой кнопкой мыши узел npm в обозревателе решений и выбрав установить пакеты npm.
Если одна или несколько версий пакетов устарели и приводят к ошибке, может потребоваться установить более последнюю версию для устранения ошибок. См. сведения об использовании package.json для управления версиями пакетов npm в файле конфигурации package.json.
В обозревателе решений щелкните правой кнопкой мыши узел проекта и выберите "Добавить>существующую папку".
Выберите папку dist и выберите команду "Выбрать папку".

Visual Studio добавляет в проект папку dist , содержащую app-bundle.js и app-bundle.js.map.
Откройте app-bundle.js для просмотра транспилированного кода JavaScript.
Если появится запрос на перезагрузку внешних измененных файлов, выберите "Да" на "Все".

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

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

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

Откройте package.json и добавьте следующий раздел после dependencies раздела:
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
Сохраните ваши изменения.

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

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

Если вы знаете, что предпочтительная цель отладки доступна на вашем компьютере, но не отображается в качестве варианта, выберите «Открыть с помощью» в раскрывающемся списке целей отладки. Выберите целевой объект браузера по умолчанию в списке и выберите "Задать как значение по умолчанию".
Чтобы запустить приложение, нажмите клавишу F5, нажмите зеленую кнопку со стрелкой или нажмите кнопку "Начать отладку>".

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

Visual Studio запускает приложение, запуская файл запуска server.js.
Закройте окна браузера и консоли.

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

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

В server.jsщелкните в области слева staticPath от объявления, чтобы задать точку останова:
Чтобы запустить приложение, нажмите клавишу F5 или выберите ">Начать отладку".

Отладчик останавливается на указанной точке останова, текущая команда выделена. Теперь вы можете проверить состояние вашего приложения, наводя указатель мыши на переменные, которые в настоящий момент находятся в области видимости. Используйте окна отладчика, такие как окно Locals и окно Watch.
Чтобы продолжить работу приложения, нажмите клавишу F5, нажмите кнопку "Продолжить" на панели инструментов отладки или нажмите кнопку "Продолжить отладку>".

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

Установка и нажатие точки останова в клиентском коде React

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

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

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

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

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

Выберите "Просмотр с" в раскрывающемся списке на панели инструментов отладки.
На экране "Обзор с помощью", с выделенным вашим предпочтительным браузером, выберите Добавить.
Введите флаг --remote-debugging-port=92222 в поле "Аргументы ".
Присвойте браузеру новое понятное имя, например Edge с отладкой или Chrome, а затем нажмите кнопку "ОК".
На экране "Обзор с помощью " нажмите кнопку "Обзор".

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

msedge --remote-debugging-port=9222

или

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

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

Присоединение отладчика к клиентскому скрипту

В редакторе Visual Studio установите точку останова в app-bundle.js или app.tsx исходном коде.
- Для app-bundle.jsзадайте точку останова render() в функции. Чтобы найти функцию render() в файле app-bundle.js, нажмите Ctrl+F или выберите Edit>Find and Replace>Quick Find, и введите 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, что обеспечивает отладку.
Выберите целевой браузер в качестве целевого объекта отладки в Visual Studio, а затем нажмите клавиши CTRL+F5 или нажмите кнопку "Начать отладку>", чтобы запустить приложение в браузере.

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

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

Подсказка

После первого присоединения к процессу можно быстро повторно присоединиться к тому же процессу, выбрав Отладка>Повторное присоединение к процессу или нажав Shift+Alt+P.
В диалоговом окне "Присоединение к процессу" получите отфильтрованный список экземпляров браузера, к которым можно подключиться.

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

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

Подсказка

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

В зависимости от среды, состояния браузера и действий, которые вы выполнили ранее, вы можете попасть в точку останова в 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

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

Была ли эта страница полезна?

Last updated on 2025-11-11