我目前正在将一个Play框架应用程序的视图完全由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代码知道要挂载在“ content” div上并接收模板中提供的props。
一切都很好，但是我想避免对捆绑包名称进行硬编码，以便可以从资产指纹识别中受益。这意味着要找到一种将Webpack与Play的构建过程紧密结合的方法，以便Webpack的输出可以合并到Twirl模板中。
我已经研究了插件，但是对于以这种方式集成Webpack和Twirl的建议呢？
最佳答案
这可能不是您想听到的-我也很想弄清楚如何在Twirl中嵌入交互性……但是最终，我得出结论，将javascript和twirl混合使用是一种错误的想法，最终做到了；
https://blog.usejournal.com/react-with-play-framework-2-6-x-a6e15c0b7bd
可能是因为我对Twirl不够熟悉，但是在搏斗了一段时间之后，我发现只是简单地“改变世界”以做出反应，并通过后端与后端进行对话
fetch(/api/myRoute)
很有生产力。与React Router一起使用时，我发现自己对工作效率，性能和结果感到非常满意。除了从该博客复制和粘贴之外，我很少花时间在“自定义”构建工作上，因此能够专注于我想要的内容。
我还要说的是我不够熟练，没有时间开始编写自定义“ RunHooks” ...所以这也可能是问题！
上面的链接对我来说运作良好...唯一的缺点是，更改路线时没有工具支持...因此更改后端路线或方法签名是手动的，而且有风险。对于大型应用程序来说可能不是很好...但是对于我的一小部分要求来说，这是一种有效的策略。