使用 Scala、WebJars、ReactJS 和 RequireJS 的 PlayFramework？

Question

我正在寻找有关结合标题中的四种技术的示例 :) 我有一个使用 Play、Scala 和 WebJars 的工作 ReactJS 应用程序，它是 here on GitHub。

现在我想添加 RequireJS，但我不确定如何添加，尤其是因为它似乎需要一个不同的 JSXTransformer？如果有人有指点（甚至是 PR），将不胜感激。

Answer 1

有人说可以使用 sbt-rjs 的文本插件：https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc

我会先尝试使用文本插件，因为它是所有插件中最简单的，对吧？成功后，继续使用 JSX 插件：

https://github.com/philix/jsx-requirejs-plugin

Answer 2

这不是最简单的事情，但我成功了。我会在这里给你一些提示。我也上传了my own project to github。这是一个使用 React 和 RequireJs 构建的非常简单的贪吃蛇游戏。它基于 Webjars 和 Play Framework。

请记住，RequireJs 是 Play Framework 的一部分。这是创建 React/RequireJs/WebJars/Play 集成的分步指南：

在您的 plugins.sbt 中添加 addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2")。这是一个将 JSXes 转换为 JSes 的插件，如果需要，还可以去除流类型。
在您的主 scala.html 文件中添加 @helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url)。这将添加一个带有 data-main 和 src 属性的 script 标签，这些标签用于 bootstrap 您的 RequireJs 应用。

在您的 assets/javascripts 文件夹中创建 react.js 文件：

define(['../lib/react/react-with-addons'], function(React) {
    window.React = React;
    return React;
});

在您的 assets/javascripts 文件夹中创建 main.jsx 文件：

require.config({
   // standard requirejs config here
});

require(['react', 'components/YourComponent'], function(React, YourComponent) {
    'use strict';
    $(document).ready(function() {
        React.render(<YourComponent />, document.getElementById('container'));
    });
});

您的标准 React 组件转到 assets/javascripts/components/YourComponent.jsx 并像标准 RequireJs 模块一样定义。记得 return 一个 React class:

define(function(require) {
    var React = require('react');
    var AnotherComponent = require('components/AnotherComponent');
    return React.createClass({ ... });
}

希望对您有所帮助。如果您有任何问题，请告诉我。

Answer 3

看看：https://github.com/nemoo/democratizer

这是一个使用 play framework、scala、slick、mysql 作为 restful 后端的示例项目。

客户端是用 React 编写的 javascript 单页应用程序 (SPA)。它使用 React 路由器进行客户端站点路由和 ES6 javascript.

构建过程结合了 webpack 和播放激活器，可以为服务器和客户端代码启用简单的自动浏览器刷新。

使用 Scala、WebJars、ReactJS 和 RequireJS 的 PlayFramework？

PlayFramework with Scala, WebJars, ReactJS and RequireJS?

scala

playframework

requirejs

reactjs

webjars