如何将现有的 React 应用程序（只是 UI 没有后端）插入（注入？）到 SilverStripe 页面布局中？

Question

我的问题是：我一直在阅读 SilverStripe 4 文档，以便找到一种方法将现有的 React 应用程序（只是 UI 的嵌套 React 组件，没有后端）插入到 SilverStripe 页面布局中。这可能吗？您如何确保 SilverStripe 具有正确的依赖项？

到目前为止，我的研究试图回答这个问题：由于传统的 React 项目使用 NPM（节点包管理器）来获取所有正确的依赖项，并且 Node.js 作为服务器，我想知道如何解决这个问题，因为我的 SilverStripe 项目在 Apache 服务器上运行。我找到了这个包，我需要把它添加到我的项目中吗？ https://www.npmjs.com/package/@silverstripe/webpack-config

我遇到的最接近的是一篇关于在 SilverStripe 项目中包含 React 组件的文章，其中讨论了自定义 CMS 的管理界面。我想改为在网站的 public 页面上显示 React 组件。 https://docs.silverstripe.org/en/4/developer_guides/customising_the_admin_interface/reactjs_redux_and_graphql/

文章中提到了一个客户端框架，它有自己的依赖注入实现，称为 Injector。我找不到关于此的其他文档。

我有一个 PageController class，目前只有与 SilverStripe 相关的要求（JavaScript 和 css）。这是按照 SilverStripe 课程 1 -4 制作的。

<?php

namespace {

    use SilverStripe\CMS\Controllers\ContentController;

    use SilverStripe\View\Requirements;

    class PageController extends ContentController
    {

        private static $allowed_actions = [];

        protected function init()
        {
            parent::init();
            // You can include any CSS or JS required by your project here.
            // See: https://docs.silverstripe.org/en/developer_guides/templates/requirements/
                Requirements::css('css/bootstrap.min.css');
                Requirements::css('css/style.css');
                Requirements::javascript('javascript/common/modernizr.js');
                Requirements::javascript('javascript/common/jquery-1.11.1.min.js');
                Requirements::javascript('javascript/common/bootstrap.min.js');
                Requirements::javascript('javascript/common/bootstrap-datepicker.js');
                Requirements::javascript('javascript/common/chosen.min.js');
                Requirements::javascript('javascript/common/bootstrap-checkbox.js');
                Requirements::javascript('javascript/common/nice-scroll.js');
                Requirements::javascript('javascript/common/jquery-browser.js');
                Requirements::javascript('javascript/scripts.js');
        }
    }
}

我还有一个扩展了 PageController class 的 ReactPageController class。我是否在此处包括 React 的要求（依赖项？）？

<?php
namespace SilverStripe\Lessons;

use PageController;    

class ReactPageController extends PageController 
{
//include another init method here?
}
?>

然后我需要以某种方式在 ReactPage.ss 的布局中注入 React 组件（'ReactPage.php' class extends 'Page.php' class）。注意：Page.ss 的布局包括 ReactPage.ss 将继承的简单导航栏、页眉和页脚。

ReactPage.ss 模板

<!-- BEGIN CONTENT -->
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="main col-sm-8"> 
                        <div>
                           <!-- INSERT REACT CONTENT HERE:replace Hello World!-->
                           <h1>Hello World!</h1>
                        </div>                  

                    </div>

                    <div class="sidebar gray col-sm-4">
                        <% if $Menu(2) %>
                        <h3>In this section</h3>
                            <ul class="subnav">  
                                <% loop $Menu(2) %>
                                    <li><a class="$LinkingMode" 
                                     href="$Link">$MenuTitle</a></li>
                                <% end_loop %>
                            </ul>
                        <% end_if %>
                    </div>
                </div>
            </div>
        </div>
        <!-- END CONTENT -->

结果将是一个页面，其中不是硬编码 "Hello World!"，而是一个根组件，其中嵌套了很多组件。嵌套的 React 应用程序将具有与独立的 React 应用程序相同的功能。

感谢您花时间阅读我的长问题。任何答复将不胜感激。我只是在学习 React 和 SilverStripe 我的问题也可能令人困惑或措辞不当，如果是这种情况，我们深表歉意。再次感谢 :-).

Answer 1

您可以在控制器中使用 Requirements::javascript() 调用或使用 <% require %> 调用从模板中注入前端应用程序包。基本概念是 "add your JavaScript (and/or CSS) bundles to my frontend view"。鉴于捆绑包在页面上可用，从那里开始由您的捆绑包自行启动。

这是一个添加到主题的轻量级示例：

添加主题文件夹，例如themes/my-theme
通过将其添加到 app/_config/theme.yml
添加一个ReactPage 布局（注意：布局是内容部分，不是整个页面布局）

# File: ./themes/my-theme/templates/Layout/ReactPage.ss
<div id="my-react-app">
    If you can see this, your React app hasn't initialised yet
</div>

刷新（?flush 在您的浏览器中）缓存

如果您在 CMS 中添加 ReactPage，然后在您的前端打开它，您现在应该会看到您的 React 应用尚未初始化的消息。这是有效的，因为 SilverStripe 将查找页面的继承链以找到具有与其 class 名称匹配的模板的页面。请注意，这包括 class 的名称空间，因此如果您的 class 有一个名称空间，则它需要是 templates/Foo/Bar/Layout/ReactPage.ss，例如

现在初始化一个演示 React 应用程序：

cd themes/my-theme && create-react-app js
cd js && yarn build

您现在需要告诉 SilverStripe "expose" your theme assets，这会将它们符号链接（默认）到 public/resources 目录，这样您就可以从您的 webroot 访问它们（public/文件夹）。

# File: ./composer.json
...
"extra": {
    "expose": [
        "themes/my-theme/build/static/js/bundle.js"
    ]
}

运行 composer vendor-expose 从您的根项目文件夹重新公开您的所有资源。

最后，将您的要求添加到您的 SilverStripe 模板或控制器中。您可以通过控制器的 init() 方法或直接在模板中执行此操作：

# File: ReactPageController.php (note that this may not exist and doesn't need to necessarily)
use SilverStripe\View\Requirements;

// ...

protected function init()
{
    parent::init();

    Requirements::javascript('themes/my-theme/js/build/static/js/main.ad956de7.chunk.js');
    Requirements::javascript('themes/my-theme/js/build/static/js/2.6efc73d3.chunk.js');
    Requirements::javascript('themes/my-theme/js/build/static/js/runtime~main.a8a9905a.js');
    Requirements::css('themes/my-theme/js/build/static/css/main.5c68d653.chunk.css');
}

出于本示例的目的，我使用了 create-react-app 创建的文件的哈希名称。如果你有一个一致的文件名，比如 bundle.js 之类的，那么在 SilverStripe 中集成会更容易。

您也可以在模板中执行此操作：

# File: ./themes/my-theme/templates/Layout/ReactPage.ss
...
<% require javascript('themes/my-theme/js/build/static/js/main.ad956de7.chunk.js') %>
<% require javascript('themes/my-theme/js/build/static/js/2.6efc73d3.chunk.js') %>
<% require javascript('themes/my-theme/js/build/static/js/runtime~main.a8a9905a.js') %>
<% require css('themes/my-theme/js/build/static/css/main.5c68d653.chunk.css') %>

现在加载您的浏览器，您将看到 React 应用运行。它会有点破损，但为了这个示例，它足以展示如何在您的页面上获得 React 应用程序运行。

Answer 2

如果您已经安装了 NPM、webpack 和 babel，那么您需要在 webpack.config.js 中创建一个入口点来触发 .jsx 文件。例如

module.export = [
   entry:[
   ],
    output: [
    ]
]enter code here

请看这个link
https://webpack.js.org/configuration/output/
要么

如何将现有的 React 应用程序（只是 UI 没有后端）插入（注入？）到 SilverStripe 页面布局中？

How to insert (inject?) an existing React app (just a UI without a backend) into a SilverStripe page layout?

reactjs

silverstripe-4