使用 single-spa 创建结构化微前端

Question

我想把我的前端设计成一个微前端项目，我想使用single-spa。 我遇到的问题是：

我想创建一个名为 MF1 的应用程序作为基础结构，它是一个 React 应用程序，将有页眉、页脚、侧边栏和主要内容的空白位置。

现在，我想在 MF1 的主要内容中渲染其他应用程序。

我熟悉 single-spa 布局引擎，但问题是在根配置项目中使用 UI 框架的限制。例如，侧边栏有一个打开和关闭的按钮，它将在 React 应用程序中处理，因此我无法使用 single-spa 布局引擎来制作我正在寻找的结构，或者我可能不知道如何.

我该如何实现这个场景？ single-spa 是实现此功能的好选择吗？

我想要像下图这样的东西。 MF1中的header、sidebar、footer区域，根据选中的菜单项，相应的微前端项目会在白色区域渲染。

如有任何帮助，我将不胜感激。

Answer 1

您可以通过single-spa完美实现您的目标。在您的描述之上，我将补充您可以：

• layout the microfrontends inside the root-config 添加 css 网格布局以获得屏幕截图中描述的布局

• 对于侧边栏切换，您有两个选择：

  1. 使 root-config 内的网格布局响应：这样当侧边栏折叠时，主要内容和 header 填充内容都会增长。

  2. 在侧边栏切换时在侧边栏内传播一个事件，并使主要和 header 微前端甚至在它们自己内部监听该事件以修改它们的宽度。

如有疑问，请按照他们的建议加入我们的single-spa slack channel。