EMP 微前端分享内容回顾（下）

前端

2023-11-30 19:04:24

在上一篇文章中，我们探讨了 EMP 微前端架构的基础和关键概念。在本篇文章中，我们将深入探讨 EMP 微前端开发中的关键技术——PK 条组件，并介绍其在不同平台上的共享实现。

什么是 PK 条组件？

PK 条组件是一个包含了业务逻辑的组件，用于显示多人之间的 PK 进度。它主要用于 PC 客户端的内嵌页面 Web 项目和移动端 APP 的内嵌页面 Web 项目中。

PK 条组件的共享方案

由于 PK 条组件需要在不同的平台上共享，因此我们需要解决 PC Web 项目和移动端 Web 项目之间如何共享组件资源的问题。有以下三种方案：

复制粘贴： 这是一种简单粗暴的方案，但我们不予考虑。
通过npm包共享： 将PK条组件作为一个npm包发布，然后在不同的项目中安装和使用。这种方案的优点是简单方便，但缺点是组件的维护和更新会比较麻烦。
通过微前端架构共享： 利用微前端架构，将PK条组件作为一个独立的微前端应用开发，并将其部署到一个独立的域名或子路径下。然后，不同的项目可以通过微前端框架将PK条组件嵌入到自己的页面中。这种方案的优点是组件的维护和更新更加方便，而且可以实现更细粒度的权限控制。

采用微前端架构共享 PK 条组件

在 EMP 微前端架构中，我们采用了第三种方案，即通过微前端架构共享 PK 条组件。具体实现步骤如下：

将 PK 条组件开发为一个独立的微前端应用，并将其部署到一个独立的域名或子路径下。
在需要使用 PK 条组件的项目中，引入微前端框架，并配置微前端应用的加载规则。
在页面中，通过微前端框架将 PK 条组件嵌入到指定的位置。

具体代码示例

在 React 中使用微前端框架 Single-spa 加载 PK 条组件的代码示例：

import { registerApplication, startApplications } from "single-spa";

registerApplication({
  name: "pk-bar",
  app: () => import("http://localhost:3001/pk-bar"),
  activeWhen: (location) => location.pathname.startsWith("/pk-bar"),
});

startApplications();

优势

采用微前端架构共享 PK 条组件具有以下优势：