2

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

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

4

3 回答 3

4

这不是最简单的事情，但我能够成功。我会在这里给你一些提示。我还将自己的项目上传到了 github 。这是一个使用 React 和 RequireJs 构建的非常简单的蛇游戏。它基于 Webjars 和 Play 框架。

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

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

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

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

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

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

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

  5. 你的标准 React 组件assets/javascripts/components/YourComponent.jsx像标准的 RequireJs 模块一样被定义。记得返回一个 React 类：

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

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

于 2015-06-24T23:53:02.697 回答
0

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

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

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

于 2015-06-20T23:59:54.450 回答
0

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

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

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

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

于 2016-01-19T21:01:15.267 回答