Question

我一直在使用npm run build为我的React项目创建构建文件，该文件自动在React项目static/js，static/css和static/media中的构建目录中生成三个文件夹（包含SVG文件）。前两个文件夹static/js和static/css可以通过在ReactPageController的Requirements方法上使用SilverStripe init类来处理（嵌套嵌套的SilverStripe布局的PageController React app），将路径添加到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目录中创建SymLinking。

媒体文件不是那么容易，因为SilverStripe的Requirements类仅处理JavaScript或CSS文件。此外，脚本npm run build自动配置react-app构建文件的相对路径，而无需考虑将Silverstripe项目结构嵌套在例如其中的情况。 npm run build之后的相对路径为/static/media/icon.svg。

要获取static/media/icon.svg文件以供虚拟主机拾取，这意味着我必须手动将static/media文件夹的副本（包含站点图标作为svg文件）放置在{ {1}}目录。我想将svg文件放置在my-SS4-project/public文件夹中。但是，如果虚拟主机无法失去对static / js和static / css构建文件夹的SymLink的访问权限，那么我就无法将虚拟主机指向该文件夹。

生成的构建文件夹路径和文件为：

my-SS4-project/public/resources

下面显示了使用init函数和Requirements类从Circles-app构建文件中引入JavaScript和CSS文件的CircleAppPageController.php文件。注意：react-app嵌套在SilverStripe项目的app文件夹中。

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

此处是react-app出现在ReactAppPage.ss布局中的位置（注意：ReactAppPage.php类扩展了Page.php类。Page.ss的布局包括一个简单的导航栏，页眉和页脚，这些都是ReactAppPage。 ss将继承）。

<?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');

    }
}
?>

我对此并不陌生，建议您尝试编写DOS批处理脚本来自动执行我正在执行的所有手动操作，以使每次<% include Banner %>  <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> 中需要更改新内容的图标正常工作构建。

我已经进行了大量研究，并了解到SS4决定不让公用文件夹可配置。此外，出于安全原因，SS4在2018年12月也不再支持SVG文件。我也听说过，使用SilverStripe 4后端可以在生成后更改SVG文件的生成路径。任何对此的想法都是很棒的。

预期的结果是，我可以尽可能地自动化构建过程，并将文件放在SilverStripe项目中的正确位置。也许我正在尝试做一些比需要的复杂的事情？

如何在SilverStripe项目中构建一个React应用（包含SVG文件），从而保持SS4文件夹约定？

0 个答案: