Question

我是新来的。我想建立micro-ui应用程式。我将使用单温泉框架。所以我想有3个单独的文件夹，其中包含不同种类的ui应用程序。我想分开建造它们。这可能吗？我该怎么办？

我知道我有2个React应用程序和一个单Spa应用程序（可导入另一个应用程序）。我有1个package.json \ webpack.config \ babel文件。因此，我想将这些应用程序分开（例如将它们放入不同的本地磁盘（C，D，e.c.t。））。

例如：我想重建我的一个应用程序，而无需重建每个应用程序（只是我更改的一个）。

Answer 1

我不确定是否能正确理解您的问题，但是我建议不要集中精力于文件夹/文件的物理结构。我建议研究一下microfrontends。

例如，您可以有许多不同的应用程序，可以分别构建和交付。每个微前端应用程序都可以随心所欲，例如React App，纯jquery或您想出的任何东西。

假设您的主索引文件将包含：

<html>
<head></head>
<body>
    <div id="app-container"></div>
<body>
</html>

因此，在服务器上呈现模板时，您将根据自己的路线将 app-container 注入到适当的应用程序中。

// some code in the Controller that you going to build for your app
public function getFrontendApp(Route)
{

    case Route.mainPage:
         return <div>This Is React App!</div>
    case Route.shoppingList:
         return <div>This is jquery!<div>

    // somewhere here you will also inject css or js bundles for every app 
}

或者，即使您不想构建服务器，也可以手动注入捆绑包。只需在构建应用程序后引用它们即可。

// https://myshop.com/home
(home.html)
<html>
<head>Home Page</head>
<link href="react-css-bundle.css"/>
<body>
    <div id="app-container">
        <div>My React App!</div>
    </div>
<body>
<script src="my-react-app-bundle.js"/>
</html>

//https://myshop.com/list
(list.html)
<html>
<head>Shopping List</head>
<link href="jquery-bundle.css"/>
<body>
    <div id="app-container">
        <div>My JQUERY App!</div>
    </div>
<body>
<script src="my-jquery-bundle-app.js"/>
</html>

Answer 2

我有一个github项目，该代码在我以前的工作中曾用过，它实现了多个独立的微型应用程序，这些应用程序分别使用单个spa进行单独管理和部署。

看看它，它可能会给您一些想法。

https://github.com/agrawald/micro-frontend-single-spa

让我知道您是否有问题。

单温泉项目拆分

2 个答案: