我目前正在将一个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” ...所以这也可能是问题!
上面的链接对我来说运作良好...唯一的缺点是,更改路线时没有工具支持...因此更改后端路线或方法签名是手动的,而且有风险。对于大型应用程序来说可能不是很好...但是对于我的一小部分要求来说,这是一种有效的策略。