Автоматизирани HTML файлове за изоморфни React приложения
Наскоро създадох моето първо изоморфно приложение React. По време на този процес препратих много шаблони, за да разбера как те генерират крайните HTML файлове, тъй като ми беше трудно да ги генерирам. Открих често срещан проблем в начина, по който се генерират HTML файловете, и измислих решение за същото, което бих искал да споделя с всички.
Следващата статия предполага, че сте запознати с React, Webpack и Express.
Проблемът
Почти всеки модел използва шаблонни низове или отделен клас React за генериране на HTML файловете. Всички активи бяха добавени в него въз основа на файла на манифеста, генериран от webpack. Следният фрагмент е от react-redux-universal:
Тук те имат отделен клас React, който изобразява HTML. Всички активи се предават като подложка и се попълват в HTML.
Това изглежда добре. Но мащабируемо ли е? Кажете, трябва да добавите фавикон. Обичайният начин е да добавите <link> таг с местоположението към иконата. Сега, да кажем, че трябва да добавите различни типове/размери favicon. Ще добавите ли всички различни типове ръчно? Правилното решение ли е?
Отговорът е НЕ!! Добавянето на всичко ръчно е болезнен процес.
Когато разработвам неизоморфни React приложения, използвам HTML-webpack-plugin, за да генерирам моите HTML файлове и favicons-webpack-plugin, за да генерирам различни типове/размери favicon от едно изображение и да ги инжектирам в моите 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 по време на изграждането на webpack.
Екранираните изрази ще бъдат преобразувани като нормален низ, който ще се използва от express-handlebars за анализиране и инжектиране на съдържание в сървъра 🙌
След това актуализирайте конфигурацията на вашия webpack, за да използвате HTML-webpack-plugin.
Тук трябва да посочите типа на изходния файл като .hbs, така че да може да се използва в сървъра като шаблон за Handlebars. Това е много важно!
Професионален съвет
HTML-webpack-plugin също ви позволява да минимизирате изходните файлове. Можете да използвате това, за да спестите няколко байта по мрежата.
Когато стартирате webpack, ще получите шаблонен файл, подобен на следния:
Сега имаме шаблонен файл с всички добавени активи и favicons, оставяйки {{{html}}}, който ще използваме в сървъра за инжектиране на динамично съдържание.
Сега, в сървъра (използвам express за този пример), регистрирайте системата Handlebars и използвайте получения index.hbs като основен шаблон за оформление.
Това ще вземе шаблона, създаден от HTML-webpack-plugin, като основно оформление, ще анализира и замени изразите, ако има такива, със съдържание.
ТАДА!! Сега имате напълно автоматизиран и силно мащабируем начин за генериране на HTML файлове за вашите изоморфни React приложения.
Предимства
- Напълно автоматизиран и мащабируем
- Няма нужда да генерирате манифестен файл
- Може да се възползва от HTML-webpack-plugin и неговите мощни добавки
- Може да се възползва от шаблонния двигател
- По-малко код в сървъра
Ако имате някакви предложения или въпроси, коментирайте по-долу или ми пишете на [email protected]
В момента също пиша подробен блог за изграждането на прогресивно уеб приложение от нулата. Така че, следете моя блог.
