在 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

然后，您将需要根据运行在模板中使用不同的导入块，如在开发或生产中，如下所示：

@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 和其他模块管理方案可以实现更精细的设置，但恕我直言，这是小型项目中最简单的解决方案。

在 Webjar 中使用 React 玩框架

Play Framework with React in Webjar

scala

reactjs

webjars