如何结合play框架和angular2？

Question

我的问题是关于如何在项目中将正面和背面组织在一起。 据我所知，有两种方法可以做到这一点

1. 使用 web-jars 依赖项和 sbt 插件将前端和后端组合到一个项目中。因此 sbt 将运行所有必要的操作，例如 uglify、concat、compilation（typescript 到 javascript）...
2. 前后分开，分别部署。在这种情况下，后端必须添加标头Access-Control-Allow-Origin。这样，前端和后端可以部署在 2 个不同的主机中。使用的工具是 npm 和 gulp/grunt
3. 1 和 2 的混合。仍然使用相同的存储库作为前端和后端，但前端是由 npm、bower 和 gulp/grunt 等外部工具构建和生成的

目前，选项 2 和 3 的文档并不多。此外，typescript 插件还没有准备好。

scala play + angular2 开发哪种方式更好？

Answer 1

我最近一直在使用几个 Angular 和 Angular 2 应用程序并处理了类似的问题。对于所有场景，我们的后端和前端应用程序在代码方面是分开的，并且仅通过 REST 接口进行通信。尽管如此，我们同时提供前端和后端部分，并且为两者使用一个托管服务器（可以是 Play Framework 或 Tomcat）感觉很自然。

选项 #1 一开始，我们选择了这个。 Webjars 看起来像一个奇迹，几个 sbt 或 maven 插件可以帮助您完成前端项目的缩小、编译、linting 等。 这对某些人来说可能会很顺利。不幸的是，我发现这个工作流程不自然。一些插件丢失或配置困难。 Webjars 并不总是最新的，其中一些是自动可用的，有些不是......等等。在一个简单的项目中它可能工作，但对我来说，这还不够。

选项 #2 我们已经尝试过单独的服务器进行开发，但我们很快就退出了。对于大多数操作，您仍然需要前端和后端服务器。所以你必须同时开始。这意味着您有 2 倍以上的命令或工作流程来记住和教导他人。 CORS 不是一个大问题，但您可能会考虑在生产中禁用它，这意味着项目中需要额外的工作。以这种方式单独开发后端或前端会更快，但我认为，如果您要同时提供两者 - 您的开发过程应该可以帮助您。

选项 #3 那就是我们正在使用的那个。使用 sbt 是可能且方便的。 SbtWeb 插件允许您将playRunHooks 设置为您希望在项目中运行的任何操作。这个想法是运行一个 JavaScript 构建工具，它将完成所有必要的前端工作，fe：

playRunHooks += {
  Process(Seq("npm", "install"), file(portal)).lines.foreach(println)
  RunSubProcess(portal, "npm", "run", "watch")
}

RunSubProcess 可以找到here。

因此，长话短说，您让 Play Server 为您的静态内容提供服务，但忽略其变化。这由npm、gulp、webpack、grunt 负责——无论您选择什么。有很多 JavaScript 构建工具、插件和模板可以帮助您。您不需要任何 sbt 插件，只需让 JavaScript 世界完成它的工作。一开始可能很难设置，但很快就会得到回报。

作为示例项目，您可能需要查看 Activator 模板 Play Framework with Angular 2 and Webpack 2，它的项目托管在 GitHub 上：play-ng2-webpack2。它帮助了我一点。

现在也可以使用带有xsbt-web-plugin 和 developmentMode 的 Tomcat。哲学是相似的。

希望你能找到自己的方式:)。