将 Play 框架和 Twirl 模板与 Webpack 和 React 集成答案

【问题标题】：Integrating Play Framework and Twirl Templates with Webpack and React将 Play 框架和 Twirl 模板与 Webpack 和 React 集成
【发布时间】：2019-08-25 18:29:51
【问题描述】：

我目前正在将一个具有完全由 Twirl 模板组成的视图的 Play Framework 应用程序迁移到一个具有由 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 并接收模板中提供的道具。

这一切都很好，但我想避免对捆绑名称进行硬编码，以便我可以从资产指纹中受益。这意味着想办法将 Webpack 与 Play 的构建过程更紧密地结合起来，以便将 Webpack 的输出合并到 Twirl 模板中。

我研究过插件，但是对于以这种方式集成 Webpack 和 Twirl，您有什么建议？

【问题讨论】：

我不熟悉twirl，但是进入 webpack 管道的内容是什么？
Twirl 是 Play Framework 中用于服务器端渲染 HTML 的模板语言，类似于 Rails FWIW 中的 ERB。 Webpack 管道（以及许多其他东西）将 TypeScript JSX/Sass 转换为 JavaScript/CSS 包，我已定义其名称以匹配模板中的内容。模板包含变量，其值成为安装在“内容”div 中的包中的 React 代码的道具。
这些模板是单独的文件吗？你可以提供给 webpack 的东西吗？据我了解，您想将捆绑文件名注入模板中，对吗？
我基本上想处理动态生成的 Twirl 模板，就像 html-webpack-plugin 处理静态 HTML 文件一样。这些包是在一个完全独立的过程中生成的，Play 几乎不知道（因为PlayRunHook）模板。
好的，您可以使用自定义模板（旋转一个）提供 html-webpacl-plugin 并指定使用此方法注入的位置：github.com/jantimon/html-webpack-plugin/tree/master/examples/…

标签： javascript reactjs webpack playframework twirl

【解决方案1】：

这可能不是你想听到的——我也试图弄清楚如何在 Twirl 中嵌入交互性......但最后我得出结论，混合 javascript 和 twirl 是一个落后的想法，最终这样做；

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

可能是我对 Twirl 还不够熟悉，但摔跤了好一阵子，我发现只是“改变世界”变成了 react，并通过它与后端对话

fetch(/api/myRoute)

非常有成效。与 React Router 一起使用时，我发现自己对生产力、性能和结果非常满意。除了从该博客复制和粘贴之外，我几乎没有时间花在“自定义”构建工作上，因此能够专注于我想要的。

我还要说我不够熟练，没有时间开始编写自定义“RunHooks”......所以这也可能是问题！

上面的链接对我来说效果很好...唯一的缺点是当更改路由时没有工具支持...因此更改后端路由或方法签名是手动且有风险的。对于大型应用程序来说可能不是很好......但对于我的一小部分需求来说是一个有效的策略。

【讨论】：

我看到了那个链接，也考虑过 React Router 方法，但它对我的应用程序来说太重了。感谢您的建议。