Как создать приложение React (содержащее файлы SVG) внутри проекта SilverStripe, чтобы обеспечить соблюдение соглашений о папках SS4?

Question

Я использовал npm run build для создания файлов сборки для моего проекта React, который автоматически создает три папки в каталоге сборки внутри проекта React static/js, static/css и static/media (содержащие файлы SVG). Первые две папки static/js и static/css могут обрабатываться с помощью класса SilverStripe Requirements в методе init объекта ReactPageController (PageController для макета SilverStripe с вложенным приложением React), добавляя пути к файл composer.json

"extra": {
        "expose": [
            "app/react-complete-guide-app/build/static/js",
            "app/react-complete-guide-app/build/static/css",

        ],

и запуск composer vendor-expose для создания SymLinking в каталоге SilverStripeProject/public/app/react-app.

Медиа-файл не так прост, потому что класс Requirements SilverStripe работает только с файлами JavaScript или CSS. Также сценарий npm run build автоматически настраивает относительный путь к файлам сборки react-app без учета структуры проекта SilverStripe, в которую он будет вложен, например, в. относительный путь после npm run build составляет /static/media/icon.svg.

Чтобы получить файлы static/media/icon.svg для виртуального хоста, мне нужно вручную поместить копию папки static/media (содержащую значки сайта в виде файлов svg) в каталог my-SS4-project/public. Я хочу поместить файлы svg в папку my-SS4-project/public/resources, где они должны находиться. Но тогда я не могу указать виртуальный хост на эту папку без потери виртуального хоста доступа к SymLinks для папок сборки static / js и static / css.

Сгенерированные пути и файлы папки сборки:

build/static/js:

- main.f8fcfe77.js
- main.f8fcfe77.js.map

build/static/css:

- main.417390ae.css
- main.417390ae.css.map

build/static/media:

- bottom_image_height_improved_enlarged.0242eccb.svg
- glyphicons-halflings-regular.448c34a5.woff2
- glyphicons-halflings-regular.89889688.svg
- glyphicons-halflings-regular.e18bbf61.ttf
- glyphicons-halflings-regular.f4769f9b.eot
- glyphicons-halflings-regular.fa277232.woff
- ic_cloud_download.0258cc94.svg
- ic_cloud_upload.6bf269d8.svg
- ic_help.bb8f97ab.svg
- ic_local_download.ddb824a7.svg
- ic_menu.7f39fb5c.svg
- ic_new.57667fef.svg
- ic_open.ddb824a7.svg
- ic_print.420fc2c5.svg
- ic_save.3fee4fd0.svg
- logo.d6c538c9.svg
- master_menu_cancel_btn.53591bb8.svg

Ниже показан файл CircleAppPageController.php с использованием функции init и класса Requirements для извлечения файлов JavaScript и CSS из файлов сборкиact-app. Примечание: реакция-приложение вложено в папку приложения проекта SilverStripe.

<?php
namespace SilverStripe\Lessons;

use SilverStripe\View\Requirements;

use PageController;    

class ReactAppPageController extends PageController 
{
    protected function init()
    {
        parent::init();
        // Requiring build files for react-app - Doesn't include media folder files!
        Requirements::javascript('app/react-app/build/static/js/main.f8fcfe77.js');
        Requirements::css('app/react-app/build/static/css/main.417390ae.css');

    }
}
?>

Вот где реагирует на приложение в макете ReactAppPage.ss (Примечание: класс ReactAppPage.php расширяет класс Page.php. Макет для Page.ss включает в себя простую панель навигации, верхний и нижний колонтитулы, которые ReactAppPage. сс будет наследовать).

<% include Banner %>
<!-- BEGIN CONTENT -->
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="main col-sm-8"> 
                        <div>

                            <div id="root">
                                I want the react-app with it's independent CSS stylings to appear here.
                            </div>

                        </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 -->

Я новичок во всем этом, и мне посоветовали попробовать написать пакетный скрипт DOS, чтобы автоматически выполнять весь ручной взлом, который я делаю, чтобы заставить работать иконки каждый раз, когда что-то меняется в моем react-app, требующем новой сборки.

Я много исследовал и прочитал, что SS4 решил не позволять настраивать общую папку. Также SS4 прекратил поддержку файлов SVG в декабре 2018 года по соображениям безопасности. Я также слышал, что с помощью SilverStripe 4 можно изменить пути сборки файлов после сборки SVG-файлов. Любые мысли по этому поводу были бы замечательно.

Ожидаемые результаты состоят в том, что я могу максимально автоматизировать процесс сборки и располагать файлы в правильном месте в проекте SilverStripe. Может быть, я пытаюсь сделать что-то более сложное, чем нужно?