Автоматизированные файлы HTML для изоморфных приложений React
Недавно я создал свое первое изоморфное приложение React. В ходе этого процесса я обратился ко многим шаблонам, чтобы понять, как они генерируют окончательные HTML-файлы, поскольку мне было трудно их создавать. Я обнаружил распространенную проблему в том, как генерировались HTML-файлы, и нашел для нее решение, которым хотел бы поделиться со всеми.
В следующей статье предполагается, что вы знакомы с React, Webpack и Express.
Проблема
Почти каждый шаблон использовал строки шаблона или отдельный класс React для создания файлов HTML. Все ресурсы были добавлены в него на основе файла манифеста, сгенерированного webpack. Следующий фрагмент взят из react-redux-universal:
Здесь у них есть отдельный класс React, который отображает HTML. Все активы передаются как реквизит и заполняются в HTML.
Выглядит хорошо. Но можно ли масштабировать? Допустим, вам нужно добавить фавикон. Обычный способ — добавить к значку тег <link> с местоположением. Теперь предположим, что вам нужно добавить разные типы/размеры фавикона. Будете ли вы добавлять все различные типы вручную? Это правильное решение?
Ответ НЕТ!! Это болезненный процесс — добавлять все вручную.
Когда я разрабатываю неизоморфные приложения React, я использую HTML-webpack-plugin для создания своих файлов HTML и favicons-webpack-plugin для создания разных типов/размеров фавикона из одного изображения и вставки их в мои файлы HTML. Он полностью автоматизирован и масштабируем. Но мы не можем использовать этот плагин для изоморфных приложений, потому что серверу потребуется шаблон для вставки динамического контента, тогда как плагин возвращает файл HTML, а не шаблон.
Решение
С помощью простого хака вы можете использовать HTML-webpack-plugin для возврата файла шаблона вместо файла HTML, который можно использовать для изоморфных приложений. На высоком уровне мы передаем файл шаблона плагину, который возвращает файл шаблона со всеми предварительно введенными необходимыми активами. Затем мы используем этот файл шаблона на сервере для внедрения динамического контента, созданного React, и возвращаем полный HTML-код клиентам.
Сначала установите необходимые модули:
yarn add html-webpack-plugin favicons-webpack-plugin handlebars-loader express-handlebars -D
Я использую Handlebars в качестве шаблонизатора. Не стесняйтесь выбирать тот, с которым вам удобно.
Затем создайте файл шаблона Handlebars, как показано ниже:
Очень важно избегать шаблонных выражений, которые, по вашему мнению, должны анализироваться на сервере. Например, здесь мне нужно, чтобы содержимое HTML было заполнено на сервере. Итак, мне нужно сбежать от {{{html}}} с \ впереди. Это выражение будет игнорироваться при анализе загрузчика Handlebars во время сборки веб-пакета.
Экранированные выражения будут преобразованы в обычную строку, которая будет использоваться express-handlebars для разбора и вставки содержимого на сервер 🙌
Затем обновите конфигурацию вашего веб-пакета, чтобы использовать плагин HTML-webpack-plugin.
Здесь вам нужно указать тип выходного файла как .hbs, чтобы его можно было использовать на сервере в качестве шаблона Handlebars. Это очень важно!
Профессиональный совет
HTML-webpack-plugin также позволяет минимизировать выходные файлы. Вы можете использовать это, чтобы сэкономить несколько байтов по сети.
Когда вы запустите webpack, вы получите файл шаблона, подобный следующему:
Теперь у нас есть файл шаблона со всеми добавленными активами и фавиконками, оставив {{{html}}} , который мы будем использовать на сервере для вставки динамического контента.
Теперь на сервере (в этом примере я использую экспресс) зарегистрируйте движок Handlebars и используйте полученный index.hbs в качестве базового шаблона макета.
Это возьмет шаблон, созданный HTML-webpack-plugin, в качестве базового макета, проанализирует и заменит выражения, если они есть, содержимым.
ТАДА!! Теперь у вас есть полностью автоматизированный и масштабируемый способ создания HTML-файлов для ваших изоморфных приложений React.
Преимущества
- Полностью автоматизированный и масштабируемый
- Нет необходимости создавать файл манифеста
- Возможность использовать HTML-webpack-plugin и его мощные дополнения.
- Возможность воспользоваться преимуществами механизма шаблонов
- Меньше кода на сервере
Если у вас есть какие-либо предложения или вопросы, прокомментируйте ниже или напишите мне по адресу [email protected]
В настоящее время я также пишу подробный блог о создании Progressive Web App с нуля. Итак, следите за обновлениями моего блога.
