使用 Piral 创建微前端

三年多一点前，我在 LogRocket 的一篇博文中揭示了通过某种发现机制形成微前端的想法，驯服前端单体。发现机制（称为提要服务）是我参与的解决方案的核心。

那个解决方案就是 Piral，我们在半年后的 O'Reilly 的软件架构会议上正式披露了它。

今天，Piral 是微前端领域最常用和知名的解决方案之一。仅此一项就可以证明另一篇博客文章的合理性——但是，我们也有越来越多的微前端流行，以及对可扩展性的总体需求。

事不宜迟，让我们看看微前端是什么，为什么松散耦合对它们如此重要，以及 Piral 如何解决这个（和其他问题）以实现出色的可扩展性。我们将在以下部分中介绍这一点：

• 什么是微前端？

• 其他微前端框架的可扩展性问题

• 皮拉尔有何不同？

• 使用 Piral 开发您的应用程序外壳

  • 更改您的模板

  • 更改提要以显示不同的堆

• 创建应用模拟器

• 推出微前端

  • 换桩

  • 构建和发布我们的pilet

• 集成 SWR 以执行 HTTP 请求

什么是微前端？

近年来，微前端越来越流行。原因之一是对大型 Web 应用程序的需求增加。如今，AWS 和 Azure 门户等功能强大的门户以及 Netflix 或 DAZN 等丰富的用户体验并非例外，而是常态。如何构建如此庞大的应用程序？如何缩放它们？

这些问题的一个答案可以是使用微前端。微前端是业务子域的技术表示。基本思想是单独开发一部分 UI。这件作品不需要在屏幕上的一个区域呈现；它实际上可以由多个片段组成，即一个菜单项和该菜单项链接到的页面。唯一的限制是该部分应与业务子域相关。

微前端由不同的组件组成，但这些不是经典的 UI 组件，如下拉菜单或富文本字段框。相反，这些组件是特定于域的组件，并包含一些业务逻辑，例如需要发出哪些 API 请求。

即使是像菜单项这样简单的东西在这个上下文中也是一个域组件，因为它已经知道到页面的链接来自同一个业务域。一旦组件具有一些领域逻辑，它就是一个领域组件——因此可以成为微前端的一部分。

为了实现微前端，存在一整套方法和实践。它们可以在构建时、服务器端和客户端组合在一起。

在本文中，我们将研究客户端的组合，但可以为服务器编写相同的故事。那么微前端实际上是如何扩展的呢？

其他微前端框架的可扩展性问题

许多微前端框架在现实环境中面临可扩展性问题。看其他文章，乍一看技术还不错；例如，如果您阅读使用 single-spa 创建微前端应用程序或使用 Podium 构建 Svelte 微前端，它们很好地介绍了技术和用例。另一个例子可以在使用 Fronts 构建渐进式微前端中看到。

问题是这些框架通常会尝试在视觉上分割 UI。但是，实际上，您永远不会将前端拆分为“导航”、“页眉”、“内容”和“页脚”等部分。这是为什么？

如上一节所述，一个真正的应用程序由来自不同子域的不同部分组成，这些子域组合在一起形成完整的应用程序域。虽然这些子域可以在纸上很好地完全分开，但它们通常在相同的布局元素中出现在最终用户面前。

想想像网上商店这样的东西。如果您有一个用于产品详细信息的子域和另一个处理先前订单的子域，那么您不希望在作为用户的订单历史记录中只看到无意义的产品 ID。相反，您希望订单历史记录中至少显示产品名称和一些详细信息。因此，这些子域在视觉上向最终用户交错。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

同样，几乎每个子域都可以为共享的 UI 布局元素做出贡献，例如导航、页眉或页脚。因此，拥有专门处理导航区域的微前端在实践中没有多大意义，因为这个微前端会收到来自其他团队的大量请求——并成为瓶颈。这样做会产生一个隐藏的单体。

现在，有人可能会争辩说，在微前端中没有导航会导致对更改的相同需求，但这次是在应用程序外壳所有者上。这会更糟。

那么解决方案是什么呢？显然，我们需要将这些东西解耦。所以不要使用类似的东西：

import MyMenuItem1 from 'my-micro-frontend1';
import MyMenuItem1 from 'my-micro-frontend2';
import MyMenuItemN from 'my-micro-frontendN';
​
const MyMenu = () => (
    <>
        <MyMenuItem1 />
        <MyMenuItem2 />
        <MyMenuItemN />
    </>
);

我们需要注册每个必要的部分，例如来自微前端本身的导航项。这样，我们最终可以得到如下结构：

const MyMenu = () => {
    const items = useRegisteredMenuItems();
​
    return (
        <>
            {items.map(({ id, Component }) => <Component key={id} />)}
        </>
    );
};

为