Интеграция шаблонов Play Framework и Twirl с Webpack и React

В настоящее время я переношу приложение Play Framework с представлением, полностью состоящим из шаблонов Twirl, в представление, состоящее из смеси Twirl и React. Я написал PlayRunHook для интеграции Webpack с процессом сборки Play, и в результате получились пакеты JavaScript, имена которых совпадают с именами, которые я жестко запрограммировал в новых базовых шаблонах Twirl.

Итак, все выглядит так:

@(title: String)(implicit session: Session, staticAssetResolver: StaticAssetResolver)
@main(title) {
        <input type="hidden" name="pageTitle" id="pageTitle" value="@title">

        <div id="content">
        </div>

        <script language="JavaScript" src="@staticAssetResolver.asset("dist/profile.bundle.js")"></script>
}

Код React в комплекте знает, что нужно монтировать в div «content», и получает реквизиты, предоставленные в шаблоне.

Все это работает хорошо, но я хотел бы избежать жесткого кодирования имени пакета, чтобы я мог извлечь выгоду из снятия отпечатков активов. Это означает поиск способа более тесно связать Webpack с процессом сборки Play, чтобы выходные данные Webpack можно было включить в шаблоны Twirl.

Я исследовал плагины, но что бы вы предложили для интеграции Webpack и Twirl таким образом?


webpack reactjs javascript playframework twirl
person Vidya    schedule 25.08.2019    source источник
comment
Я не знаком с twirl, но какой контент поступает в конвейер webpack?   -  person felixmosh    schedule 25.08.2019
comment
Twirl — это язык шаблонов для рендеринга HTML на стороне сервера в Play Framework, подобно ERB в Rails FWIW. Конвейер Webpack (помимо многих других вещей) транспилирует TypeScript JSX/Sass в пакеты JavaScript/CSS, имена которых я определил так, чтобы они соответствовали тому, что есть в шаблонах. Шаблоны содержат переменные, значения которых становятся реквизитами кода React в пакете, смонтированном в div содержимого.   -  person Vidya    schedule 25.08.2019
comment
Эти шаблоны являются отдельными файлами? что-то, что вы можете предоставить для веб-пакета? Как я понял, вы хотите ввести имя файла пакета в шаблон, это правильно?   -  person felixmosh    schedule 25.08.2019
comment
В основном я хочу делать с динамически генерируемыми шаблонами Twirl то, что html-webpack-plugin делает с статические файлы HTML. Пакеты генерируются в совершенно отдельном процессе, о котором Play почти не знает (из-за PlayRunHook) из шаблонов.   -  person Vidya    schedule 25.08.2019
comment
Хорошо, вы можете передать html-webpacl-plugin пользовательский шаблон (закрутить один) и указать место для вставки с помощью этого метода: github.com/jantimon/html-webpack-plugin/tree/master/examples/   -  person felixmosh    schedule 25.08.2019
comment
Я видел это, но шаблоны Twirl параметризуются и генерируются в процессе сборки Play, поэтому Handlebars/Mustache/etc. подход здесь не совсем работает. Однако отчасти я задал этот вопрос, чтобы узнать, знает ли кто-нибудь, как Webpack может внедрять пакеты сразу после создания шаблонов. Это означает, что Webpack должен стать первоклассным участником процесса сборки Play.   -  person Vidya    schedule 25.08.2019
comment
Давайте продолжим обсуждение в чате.   -  person felixmosh    schedule 25.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Это, вероятно, не то, что вы хотите услышать - я тоже бездельничал, пытаясь понять, как встроить интерактивность в Twirl ... но в конце концов я пришел к выводу, что это была идея смешать javascript и twirl, в итоге сделал это;

https://blog.usejournal.com/react-with-play-framework-2-6-x-a6e15c0b7bd

Возможно, я просто недостаточно знаком с Twirl, но после долгой борьбы я обнаружил, что просто «изменить миры» на реакцию и заставить его общаться с серверной частью через

fetch(/api/myRoute)

был достаточно продуктивным. В сочетании с React Router я был очень доволен производительностью, производительностью и результатом. Я потратил немного времени на «индивидуальную» сборку, помимо копирования и вставки из этого блога, поэтому смог сосредоточиться на том, что хотел.

Я бы также сказал, что я недостаточно искусен, и у меня не было времени, чтобы начать писать собственные "RunHooks"... так что это тоже может быть проблемой!

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

person Simon    schedule 26.08.2019
comment
Я видел эту ссылку и также рассматривал подход React Router, но это слишком тяжело для моего приложения. Спасибо за предложение. - person Vidya; 27.08.2019