javascript - 将 Play Framework 和 Twirl 模板与 Webpack 和 React 集成

Question

我目前正在将一个 View 完全由 Twirl 模板组成的 Play Framework 应用程序迁移到一个 View 由 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>
}

bundle 中的 React 代码知道要挂载到“content”div 并接收模板中提供的 Prop 。

一切正常，但我想避免对包名称进行硬编码，以便我可以从 Assets 指纹识别中获益。这意味着要找到一种方法将 Webpack 与 Play 的构建过程更紧密地结合起来，以便 Webpack 的输出可以合并到 Twirl 模板中。

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

Answer 1

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

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

可能是我对Twirl还不够熟悉，折腾了半天，发现只要简单的“改变世界”就可以变成react，让它和后台通过

fetch(/api/myRoute)

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

我还要说我技术不够好，没有时间开始编写自定义“RunHooks”...所以这也可能是问题所在!

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