PlayFramework 与 Scala、WebJars、ReactJS 和 RequireJS？答案

【问题标题】：PlayFramework with Scala, WebJars, ReactJS and RequireJS?PlayFramework 与 Scala、WebJars、ReactJS 和 RequireJS？
【发布时间】：2015-06-20 17:00:25
【问题描述】：

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

现在我想添加RequireJS，但我不知道怎么去，特别是因为它似乎需要不同的JSXTransformer？如果有人有指针（甚至是 PR），将不胜感激。

【问题讨论】：

标签： scala playframework requirejs reactjs webjars

【解决方案1】：

这不是最简单的事情，但我能够成功。我会在这里给你一些提示。我还上传了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")。这是一个插件，可以将 JSX 转换为 JS，如果需要，还可以去除流类型。
在主 scala.html 文件中添加 @helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url)。这将添加一个带有data-main 和src 属性的script 标记，用于引导您的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 模块一样定义。记得返回一个 React 类：

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

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

【讨论】：

整洁。介意我问一下，您对所有这些东西的服务器端渲染有什么想法吗？

【解决方案2】：

据说有人让文本插件与sbt-rjs一起工作：https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc

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

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

【讨论】：

顺便说一句，我更喜欢 Browserify 或 Webpack 而不是 RequireJS，在一个单独的基于 Gulp 的项目中，通过 :9000 代理（为了更快的周期）并流式传输到应用程序/资产中。但是请随时通知我们，我一定会感兴趣的。
你有这种设置的例子吗？我想看到它在行动。在 Scala 项目中使用当前的 JavaScript 技术很诱人……
未见任何公开发表。谷歌：browserify 代理。

【解决方案3】：

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

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

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

构建过程结合了 webpack 和 play activator，可以为服务器端和客户端代码实现简单的自动浏览器刷新。

【讨论】：