PlayFramework со Scala, WebJars, ReactJS и RequireJS?

Я ищу пример объединения четырех технологий в заголовке :) У меня есть работающее приложение ReactJS с использованием Play, Scala и WebJars, это здесь, на GitHub.

Теперь я хотел бы добавить RequireJS, но я не уверен, как это сделать, особенно потому, что, похоже, требуется другой JSXTransformer? Если у кого-нибудь есть указатель (или даже PR), он был бы очень признателен.


reactjs scala requirejs playframework webjars
person ticofab    schedule 20.06.2015    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Это не самое простое дело, но я справился. Я дам вам несколько советов здесь. Я также загрузил свой собственный проект на github. Это очень простая игра-змейка, созданная с использованием React и RequireJs. Он основан на Webjars и Play Framework.

Помните, что 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({ ... });
}

Надеюсь, это поможет. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать.

person Michał Płachta    schedule 24.06.2015
comment
Аккуратный. Позвольте спросить, есть ли у вас какие-либо мысли о рендеринге с несколькими сторонами со всеми этими вещами? - person bjfletcher; 25.06.2015

arrow_upward
0
arrow_downward

Кто-то сказал, что текстовый плагин работает с sbt-rjs: https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc

Я бы сначала попробовал текстовый плагин, так как это самый простой плагин из всех, верно? Как только это будет успешно, перейдите к плагину JSX:

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

person bjfletcher    schedule 20.06.2015
comment
Кстати, я предпочитаю Browserify или Webpack, а не RequireJS, в отдельном проекте на основе Gulp с проксированием через: 9000 (для более быстрого цикла) и потоковой передачей в приложение/активы. Но держите нас в курсе, и мне, безусловно, будет интересно. - person bjfletcher; 21.06.2015
comment
У вас есть пример такой установки? Я хотел бы увидеть это в действии. Заманчиво использовать современные технологии JavaScript в проектах Scala... - person Michał Płachta; 30.06.2015
comment
В открытом доступе не видел. Google: браузерный прокси. - person bjfletcher; 30.06.2015

arrow_upward
0
arrow_downward

Взгляните на: https://github.com/nemoo/democratizer

Это пример проекта, который использует play framework, scala, slick, mysql в качестве спокойного бэкэнда.

Клиент представляет собой одностраничное приложение JavaScript (SPA), написанное на React. Он использует реагирующий маршрутизатор для маршрутизации клиентского сайта и javascript ES6.

Процесс сборки сочетает в себе веб-пакет и активатор воспроизведения, что обеспечивает простое автоматическое обновление браузера для серверного и клиентского кода.

person nemoo    schedule 19.01.2016