[译]一种基于模块联邦的插件前端

原文：https://malcolmkee.com/blog/a-plugin-based-frontend-with-module-federation/

在谈及模块联邦及其独立构建和部署的特性（通常称为微前端）时，一个常见的问题是，“为什么这比使用iframe更好？”虽然这的确是一个问题，特别是当只使用模块联邦拼接多个UI时，其好处可能不会立即显现的时候；答案就在于它无缝集成多个前端应用程序，并允许组件和函数调用一起工作的能力。这就是为什么模块联邦是目前构建微前端应用程序的最佳技术。

在本文中，我将为前端应用程序提供一个利用模块联邦的插件架构。该架构允许开发人员在既有应用程序中添加、删除或更新功能，而无需对应用程序进行任何更改。得益于模块联邦实现的无缝集成，该插件架构才成为可能。

插件架构是什么？

插件架构（plugin architecture）是一种软件架构，它允许 第三方开发者 通过编写插件来扩展现有软件的功能。

在插件系统中，“core”软件提供了 一组定义好的接口、API或钩子，以使开发人员在不修改核心软件的前提下添加新特性或修改应用程序的行为。这种方法促进了模块化，因为插件可以独立于核心软件开发，并且可以被轻松添加或删除以自定义应用程序。

插件系统通常用于需要大量定制的系统。例如，流行的软件，如浏览器，文本编辑器，构建工具和内容管理系统（CMS）都使用插件系统，使开发人员能够向软件添加新功能。VS Code 是一个流行的代码编辑器，它的扩展市场就是一个插件系统的例子。类似地，流行的 CMS WordPress 使用插件系统，使用户能够向其网站添加新功能。

以模块联邦实现的插件系统

模块联邦的一种典型模式包括一个单体应用程序（host），它从多个较小的应用程序（remote）中导入代码。host和remote都可以独立构建和部署，并且可以使用模块联邦在运行时将它们缝合在一起。

将插件系统应用于模块联邦，可以使host应用程序或者说"core"，在添加、更新或移除充当插件的remotes 时保持不变。唯一的约束是所有remote必须遵循一组定义好的接口或钩子。

举个例子，假设所有remote应用都必须按照以下约定导出单个远程模块/register：

// src/register.tsximport { register } from '@company/core-plugin';
import * as React from 'react';const OrdersPage = () => <h1>Orders</h1>;export default register({routes: [{path: 'orders',element: <OrdersPage />,},],
});

来自包@company/core-plugin的register函数是一个身份函数，用于强制类型安全：

import { RouteObject } from 'react-router-dom';export interface Plugin {routes: Array<RouteObject>;
}export const register = (plugin: Plugin) => plugin;

通过所有remote都使用该接口暴露的register模块，host就可以渲染已在所有remote上注册的全部路由：

//app.tsx in hostimport { Plugin } from '@company/core-plugin';
import * as React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { createRoot } from 'react-dom/client';const getAllRemotes = () =>Promise.all([import('microfrontend1/register'),import('microfrontend2/register'),import('microfrontend3/register'),]) as Promise<Array<{ default: Plugin }>>;getAllRemotes().then((mods) => mods.map((mod) => mod.default)).then((remotes) => {const router = createBrowserRouter(remotes.map((remote) => remote.routes).flat());createRoot(document.getElementById('app')!).render(<RouterProvider router={router} />);});

如下例所示，每当在remote中增添新的路由，则host中无需改变单独的代码，只消在下次加载时便会自动出现了。

// src/register.tsximport { register } from '@company/core-plugin';
import * as React from 'react';const OrdersPage = () => <h1>Orders</h1>;
const OrdersDetailsPage = () => <h1>Orders Details</h1>;export default register({routes: [{path: 'orders',element: <OrdersPage />,},{path: 'orders/:orderId',element: <OrdersDetailsPage />,},],
});

可能的插件API

在模块联邦中的插件架构有了基本了解之后，你就可以通过创建更多的API或钩子来提高host的可扩展性了。下面是一些支持常见用例的插件API。请记住，它们不是详尽的，也不是必需的。可以根据你的用例来决定其取舍，或者也可以创建自己的API。

`register` 的 `routes` 选项

这个选项在前面的部分中讨论过，是一个路由定义数组，通常可以从你使用的路由器库中扩展（在我的例子中，我重用了react-router-dom中的RouteObject接口）。它还可以包括子导航，比如在你的应用中要用tabs之类的时候。host将在构造其路由之前合并来自所有remote的路由定义。

从理论上讲，多个remote的路由可能会相互冲突，例如使用'*'这类过度贪婪的路径，当检测到这种情况时，你应该通过 linting 或控制台错误消息来缓解。

`register` 的 `navItems` 选项

也就是一个导航项目列表；你的host应用可能带有导航，此属性允许remote向其中添加/删除项目。该属性的可能定义为：

interface NavItem {path: string;label: string;/** 用去嵌套导航的章节或者说组 */section: string;/** 排序用 */order: number;/** 图标 */icon: React.ReactNode;/** 假设又区分了多种导航 */location: 'header' | 'footer' | 'sidebar';
}

结合了 `<Slot />` 组件的 `register` 之 `fills` 选项

如果需要将组件从一个remote嵌入到另一个remote，这两个API可以帮上忙。

想象一个客户票证界面，它显示多个部分，如客户个人信息和过往订单等。客户票据界面由一个团队维护，而客户个人信息和订单由另一个团队开发，每个团队都维护着自己的remote应用。

要将客户个人信息和过往订单嵌入到客户票证界面中，我们可以使用以下元素：

在客户票证界面（在 customer-support-app 那个 remote 应用里编写）中，渲染一个<Slot id="customerTicketScreen" />组件。就其本身而言，它什么也没有显示。
在客户个人数据和订单两个 remote 应用中，为 register 提供 fills选项

// src/register.tsxexport default register({fills: [{slotId: 'customerTicketScreen', // 匹配在 support 中由 Slot 提供的 idcomponent: PersonalInfoSection,},],
});