Reactjs 如何在SilverStripe项目中构建React应用程序（包含SVG文件），以便维护SS4文件夹约定？

我一直在使用

npm run build

为我的React项目创建构建文件，该项目在React项目

static/js

、

static/css

和

static/media

（包含SVG文件）内的构建目录中自动生成三个文件夹。前两个文件夹

static/js

和

static/css

可以通过使用ReactPageController（带有嵌套React应用程序的SilverStripe布局的PageController）的

init

方法上的SilverStripe

Requirements

类来处理，将路径添加到composer.json文件中

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

        ],

并运行

composer vendor expose

在

SilverStripeProject/public/app/react app

目录中创建符号链接

媒体文件不是那么容易，因为SilverStripe的

需求

类只处理JavaScript或CSS文件。此外，脚本

npm run build

自动配置

react app

构建文件的相对路径，而不考虑它将嵌套在其中的SilverStripe项目结构，例如

npm run build

之后的相对路径是

/static/media/icon.svg

要获取虚拟主机拾取的

static/media/icon.svg

文件，意味着我必须在

my-SS4-project/public

目录中手动放置

static/media

文件夹（包含作为svg文件的站点图标）的副本。我想将svg文件放在

my-SS4-project/public/resources

文件夹中，它们应该位于该文件夹中。但是，如果虚拟主机无法访问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

下面显示了circleappagecontroller.php文件，该文件使用init函数和Requirements类从react应用程序构建文件引入JavaScript和CSS文件。注意：react应用程序嵌套在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');

    }
}
?>

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