Я предоставляю полный исходный код, реализующий решение. Я буду использовать прокси для рабочей настройки ReactJS с Webpack Dev Server, Fast Refresh, NodeJS Express и Template Engine. В следующем тексте объясняется проблема и предлагается одно решение, как и почему оно работает.
Полный код, реализующий решение, о котором я говорю
Что, если у меня есть традиционный сервер и я хочу добавить часть страницы, которая будет реагировать?
ReactJS — это код, который выполняется на клиенте. Кроме того, мы хотим использовать JSX. Это облом, потому что нам нужно использовать какой-то инструмент для компиляции этого javascript. Затем нам нужно интегрировать это с быстрым обновлением! Проблема становится больше; вот моя идея, как это решить.
Создайте отдельный каталог для этой части приложения. Мы поместим Webpack и другие файлы конфигурации в этот каталог. Теперь мы можем компилировать файлы с помощью Webpack. Как мы используем быстрое обновление, сервер разработки Webpack и обычный экспресс-сервер с механизмом шаблонов? Мы могли бы запустить сервер разработки Webpack, но где страница со ссылками на файлы javascript? Эта страница размещена на экспресс-сервере, и сервер разработки Webpack не знает об этом. Как мы можем интегрировать Webpack и обычный сервер?
Мы можем разделить роли.
Сервер разработки Webpack обеспечивает горячую перезагрузку модулей, пути к файлам javascript и обслуживает скомпилированный контент.
Экспресс-сервер будет обрабатывать все запросы на переднюю линию. Для любых запросов, которые он не может принять, таких как скомпилированные файлы, наш экспресс-сервер может проксировать наш сервер разработки Webpack. Таким образом, сервер разработки Webpack предоставляет почти все, что нам нужно, из коробки, и у нас есть почти все, что нам нужно.
Как это вообще работает? Давайте представим, что мы делаем в первую очередь, когда хотим открыть ютуб.
- Откройте веб-браузер
- Введите путь вида https://www.youtube.com
- Сервер на https://www.youtube.com отправляет HTML-ответ в браузер.
- Браузер анализирует ответ HTML и отправляет запросы на сервер всякий раз, когда находит ссылку, сценарий или другие теги с относительным путем.
- Сервер получает этот запрос и пытается отправить ответ.
- Наш сервер не будет знать о скомпилированных файлах javascript, поэтому он запрашивает их у сервера разработки Webpack.
- Сервер разработки Webpack знает об этих файлах и отправляет обратно их содержимое.
А как насчет горячей перезагрузки модуля? Как это вообще работает? Он реализован с помощью веб-сокетов и работает аналогично предыдущему примеру. Они также зависят от путей в сети. Мы должны проксировать материал WebSocket с нашего экспресс-сервера на сервер разработки Webpack.
Почему мы должны делать это так? Сервер разработки Webpack мог бы лучше настроить другие инструменты. Тем не менее, проксирование хорошо справляется со своей задачей, и мы можем приложить меньше усилий, чтобы настроить его по-другому с другими вещами.
Итак, в чем была наша первоначальная проблема? Мы хотели использовать быстрое обновление на части нашей страницы. Мы хотим использовать экспресс-сервер и обслуживать часть нашей страницы с помощью сервера разработки Webpack.
Почему все это работает?
Во-первых, что такое браузер? Браузер — это программа, хорошо разбирающая текст. Он читает текст и пытается использовать его соответствующим образом (другими словами, он пытается его проанализировать). Так что еще он позволяет мне делать? Это позволяет мне просматривать содержимое моего компьютера. Почему я говорю это? Потому что просмотр содержимого моего компьютера аналогичен посещению YouTube. Разница в том, что мой компьютер позволяет браузеру открывать что угодно, а сервер YouTube позволяет браузеру входить только в его части.
Если у вас есть компьютер с Windows и вы открываете диск C через браузер, вы просматриваете каталог. Например, эта ссылка на файл:///C:/.
Итак, что такое код? Код — это текст, и поскольку браузер хорошо разбирает текст, мы можем послать ему какой-нибудь код.
Затем давайте подумаем о том, что происходит, когда мы открываем веб-страницу. Что такое веб-страница? Веб-страница — это огромный кусок текста! Поскольку я хочу создать веб-сервер, всякий раз, когда браузер переходит на мой адрес http://localhost:3000, я возвращаю ему некоторый текст, но я говорю, что текст находится в определенном формате HTML.
Frontend-разработчики знают, что такое HTML. В противном случае поищите. Если у вас есть опыт создания программного обеспечения, вы поймете.
Браузер — хороший мальчик, он будет анализировать текст в формате HTML. Когда браузер анализирует страницу, он начинает читать содержимое. Он будет отправлять веб-запрос для каждой ссылки, которую он видит. Что это говорит нам?
В теге script есть ссылка. Тогда браузер будет типа: «Привет, вы прислали мне HTML, а там тег скрипта с унифицированным расположением ресурса». Этот скрипт хочет запустить некоторый код в этом унифицированном местоположении ресурса. Можешь подать мне это?
Наш сервер хороший мальчик, он не может обработать этот адрес, но мы мудрые. Итак, мы перенаправим его на сервер разработки Webpack, а сервер разработки Webpack работает и компилирует файлы, отправляя контент для каждого запроса в качестве ответа. Он усердно работает с нашей конфигурацией, на сборку которой мы потратили один час! Затем он вернет содержимое скрипта на наш сервер. Наш сервер счастлив и отправляет код JavaScript в браузер, который запускает этот код.
Итак, как это будет работать снова?
Мы хотим иметь страницу, на которой реакция живет только в одной части. Это означает, что нам нужен элемент HTML в качестве корня. Страница с корнем должна знать все ссылки на скомпилированный JavaScript с кодом ReactJS для этого корня. Вот почему нам нужно помочь серверу. Пути ко всем файлам мы получим из файла манифеста, который упоминается в документации Webpack. Почему манифестировать? Потому что он легкий и маленький. Запись файлов на компьютере происходит медленно, как бы быстро это ни казалось, поэтому мы хотим записать абсолютный минимум.
Webpack обещает нам, что есть пути для файлов javascript, которые нам нужны, поэтому мы будем использовать их для их получения. Но сначала запишите этот файл в каталог, потому что экспресс не знает о скомпилированных файлах. Это единственный способ получить пути, чтобы получить их пути, прочитанные из манифеста.
Кроме того, мы можем отправить их через HTTP-ответ, чтобы сохранить их в памяти.
Наш экспресс-сервер может прочитать этот файл, создать теги сценария HTML со ссылками из этого файла и вставить теги сценария на страницу, которой требуется код ReactJS для корня, на который мы хотим смонтировать ReactJS.
Заключение
Итак, мы создаем файл с путями к файлам JavaScript, наш сервер читает их, вставляет на страницу, браузер анализирует страницу и запрашивает содержимое по этим путям, наш сервер не может их найти, поэтому он запрашивает Webpack, и Webpack отправляет контент обратно, а наш сервер возвращает JavaScript браузеру.
