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文件编译为.js的jsx编译插件，例如：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和其他模块管理方案可以实现更精细的设置，但这是小型项目IMHO中最简单的解决方案。

在Webjar中使用React播放框架

1 个答案: