ruby-on-rails - 将 React (react-rails) 包含到 Rails 引擎中

Question

编辑:在下面详细回答了我自己的问题，因此追溯编辑以简化问题

如何将 ReactJS 包含到我的 Rails 引擎中？

如果我直接添加 react-rails gem，则会收到错误

React::ServerRendering::PrerenderError in Blorgh::Dashboards#show
Encountered error "#<ExecJS::ProgramError: TypeError: undefined is not an object (evaluating 'this.ReactRailsUJS.serverRender')>" when prerendering SomeComponent

Answer 1

缺乏有关此主题的文档和博客文章是令人痛苦的。我本以为这是一个更受欢迎的请求。

对于其他陷入困境的人来说，我可以做一些拉扯并让以下设置发挥作用!

免责声明:我不知道这个解决方案有多“正确”以及是否推荐。我希望有人对 Rails 引擎和 Assets 管道有更多了解，以便根据需要进行编辑。

我在 development/product 和 prerender: true/prerender: false 的所有 4 种组合中对此进行了测试。 (我通过设置RAILS_ENV在本地计算机上测试了生产)

定义

下面的示例使用以下定义

• blorgh - 引擎的名称(取自官方 Rails 文档)
• SomeComponent/some_component.jsx - 我们想要包含的 React 组件的名称
• RAILS_ROOT - 引擎测试或规范文件夹内虚拟主机应用程序的根路径
• ENGINE_ROOT - Rails 引擎的根路径

设置

根据 react-rails 文档，从 ENGINE_ROOT 运行生成器，这将为您创建多个文件。

rails generate react:install

引擎配​​置 - Assets 文件夹

文件夹结构应该是 -

- app/
  - assets/
    - config/
      - blorgh_manifest.js
    - javascripts/
      - blorgh/
        - components/
          - some_component.jsx
        - application.js
        - components.js
        - server_rendering.js

components.js 和 server_rendering.js 本质上都为您包含了 React，然后在 components/ 文件夹下需要您的组件。但是 components.js 是通过 application.js 包含的，而 server_rendering.js 在预渲染服务器端时被调用

list 本身我不太理解，但就像它的名字所暗示的那样，它似乎是所有引擎的 CSS 和 JS Assets 的 list

list (这应该已经存在，只是为了清楚起见而包括在内)

# app/assets/config/blorg_manifest.js
//= link_directory ../javascripts/blorgh .js
//= link_directory ../stylesheets/blorgh .css

申请

# app/assets/javascripts/blorgh/application.js
//= require react
//= require react_ujs
//= require ./components
//= require_tree .

组件

# app/assets/javascripts/blorgh/components.js
//= require_tree ./components

服务器渲染

# app/assets/javascripts/blorgh/server_rendering.js
//= require react-server
//= require react_ujs
//= require ./components

一些组件(只是用于测试的示例)

var SomeComponent = React.createClass({
  propTypes:{
  },

  getInitialState: function() {
    return {};
  },

  render: function() {
    return (
      <div>
        THIS IS IN REACT WOOHOO
      </div>
    );
  }
});

引擎配​​置 - 应用程序

引擎初始化程序 - 需要为资源预编译的文件命名空间

# config/initializers/react_server_rendering.rb
Rails.application.config.assets.precompile += ["blorgh/server_rendering.js"]

引擎 - 需要 react 并配置它

require "react-rails"

module Blorgh
  class Engine < ::Rails::Engine
    isolate_namespace Blorgh

    # ....
    initializer("blorgh.react-rails") do |app|
      app.config.react.variant = Rails.env.to_s

      # Make sure the file is explicitly referenced for server side rendering
      app.config.react.server_renderer_options = {
        files: ["blorgh/server_rendering.js"]
      }
    end
  end
end

HTML View - 渲染组件

<%= react_component("SomeComponent", {}, { prerender: false }) %>
# or
<%= react_component("SomeComponent", {}, { prerender: true }) %>

主机应用程序配置

您的主机应用程序应包含引擎的 Assets 。为此，您需要指示引擎的用户将其添加到他们的应用程序文件中

#{RAILS_ROOT}/app/assets/javascripts/application.js
// Make sure it appears above `require_tree .`
//= require blorgh_manifest.js

在开发中运行

现在，当您运行 rails server 时，上面应该加载您的组件

在本地测试“生产”

如果您想确保生产中一切正常，您需要在本地以生产模式运行您的应用

cd RAILS_ROOT
rake assets:precompile
cd ENGINE_ROOT
RAILS_SERVE_STATIC_FILES=true SECRET_KEY_BASE=(...) rails s -e production