在 Webjar 中使用 React 播放框架

Question

我正在寻找一种使 Play 和 React 开发顺利进行的方法。我希望如果我在 Webjar 中使用 ReactJS，我可以在开发中使用 JSX 转换器，并在生产中编译 JSX，即当我运行 activator dist 命令时。有没有办法实现这样的开发工作流程？

这是我的 build.sbt

name := "play-scala"

version := "1.0-SNAPSHOT"

lazy val root = (project in file(".")).enablePlugins(PlayScala)

scalaVersion := "2.11.6"

libraryDependencies ++= Seq(
  "org.webjars" %% "webjars-play" % "2.3.0-2",
  "org.webjars.bower" % "react" % "0.13.1"
)

这是一个示例 scala 模板 react.scala.html

@main("React in Webjar") {

    <div id="content"></div>

    <script src="@routes.Assets.at("lib/react/react.js")" type="text/javascript" ></script>
    <script src="@routes.Assets.at("lib/react/JSXTransformer.js")" type="text/javascript" ></script>
    <script src="@routes.Assets.at("javascripts/reactApp.jsx")" type="text/jsx"></script>
}

我正在使用 Bower Webjars。我想知道这是否有帮助。

Answer 1

您必须使用 jsx 编译插件，您可以使用该插件将 .jsx 文件编译为 .js，例如：https://github.com/ddispaltro/sbt-reactjs

然后，您需要在模板中使用不同的导入块，具体取决于是在 dev 还是 prod 中运行，如下所示：

@if(play.api.Play.current.mode == play.api.Mode.Prod) {
  <script src="@routes.Assets.at("lib/react/react.js")" type="text/javascript" ></script>
  <script src="@routes.Assets.at("javascripts/reactApp.js")" type="text/jsx"></script>
} else {
  <script src="@routes.Assets.at("lib/react/react.js")" type="text/javascript" ></script>
  <script src="@routes.Assets.at("lib/react/JSXTransformer.js")" type="text/javascript" ></script>
  <script src="@routes.Assets.at("javascripts/reactApp.jsx")" type="text/jsx"></script>
}

使用 requirejs 和其他模块管理方案可以实现更精细的设置，但恕我直言，这是小项目中最简单的解决方案。