将 Payoneer 迁移到微前端
将 Payoneer 迁移到微前端
什么是微前端
您可能听说过微服务一词，可能是在后端应用程序的上下文中。你知道过去几年微服务在前端应用中也有一种趋势吗？它被称为微前端，用于解决前端应用程序中的一些问题，尤其是在大型应用程序中，例如我们在 Payoneer 中开发的应用程序。
微前端有助于解决哪些问题？
在像 Payoneer 这样的大型组织中，多个团队有时可以在同一个单体应用程序上工作。例如，我们正在开发的主要应用程序之一称为 My-Account。它为我们的客户提供了一个大型仪表板，其中包含许多子模块来管理他们在 Payoneer 中的账户。
今天，My-Account 应用程序位于同一个整体存储库中。 Payoneer 有一个基础架构团队（我是其中的一员）负责应用程序的核心，以及许多由其他开发团队管理和开发的模块和子模块。问题是，每次其中一个团队想要更改其模块中的某些内容时，他们的更改都会影响应用程序的其他部分，并且还会产生一些代码冲突。
此外，对于每一个小的更改，我们都需要为整个应用程序再次运行所有 CI/CD 进程，这可能会花费大量时间。
微前端方法的主要目标是将这个大型应用程序分离为较小的应用程序（将应用程序的每个模块导出为独立模块）。有了这个解决方案，每个团队只能访问他们负责的模块。
解决方案的一般描述
在前端应用程序中实现微前端的解决方案不止一种。流行的概念之一是最新的 网页包 5个特点，它被称为 模块联合 .
模块联合是多个独立的构建，应该形成一个单一的应用程序。这些单独的构建不应该相互依赖，因此它们可以单独开发和部署。
Design of the solution (by Neil Nachman)
在模块联合中，我们将模块分为主机和远程。每个主机可以包含一个或多个遥控器，并且每个遥控器也可以充当其他遥控器的主机。
共享模块是既可覆盖又可作为嵌套容器覆盖的模块。它们通常指向每个构建中的相同模块，例如相同的库。
微前端帮助我们解决什么问题？
当我们开发一个大型应用程序时，通常会有几个团队在同一个应用程序上工作。 Module-Federation 允许我们将应用程序分成更小的模块，并让每个团队管理自己的模块，而无需更改其他团队的模块。此外，当我们使用 CI/CD 流程时，在大型应用程序中构建和部署这些应用程序可能需要大量时间。通过将这些应用程序拆分为更小的模块，我们在这些流程上节省了大量时间。
我们还可以将容器应用程序用作组件库。我们可以在容器应用程序上创建通用组件并将它们公开给其他模块。可以单独部署对组件库的更改，而无需重新部署所有应用程序。应用程序自动使用最新版本的组件库。
使用微前端会出现什么问题？
没有任何方法可以带来没有问题。微前端的主要问题是应用程序之间的数据共享。该架构认为不应该有这样的数据共享，但有时它是必不可少的。解决方案是避免模块之间的通信并构建共享数据的服务。
我们如何在我们的应用程序中实现模块联合？
正如我之前提到的，Payoneer 中最大的应用程序之一称为 My-Account，它由许多模块构建而成。每几个模块都由我们的一个开发团队管理。当我们展望应用程序的未来时，我们希望使其更精简并将其分成模块，以便每个团队只在他们负责的模块上工作。因此，我们决定在自己的存储库上创建一个新模块，并能够将其用作独立模块或作为 My-Account 的一部分。这就是模块联合出现的地方。
我将解释我们为在主机（我的帐户）和远程（我们要构建的新模块）上的系统中实现模块联合而采取的所有步骤。因此，让我们深入研究一些代码！
第一步：在主机上配置wabpack文件
Webpack 5 为我们提供了一个名为 ModuleFederationPlugin 我们需要配置的。所以里面 webpack.config.js 文件，我们将使用 ModuleFederationPlugin 在模块的插件中：
第 2 步：在远程应用程序上配置 webpack 文件
远程 webpack 文件看起来与主机几乎相同，只是有一点小改动。我们只需添加我们想要创建的文件的名称（主机将导入的文件），以及我们想要公开的文件（应用程序本身）。
第 3 步：将远程应用程序导入主机应用程序
我们可以选择将要使用的遥控器列表添加到 webpack.config.js 文件作为硬编码地址，但我们希望以更动态的方式导入遥控器。因此，我们在主机应用程序中创建了一个名为“remotes”的文件夹，并创建了一些文件来处理远程模块的导入。
第一个文件是 配置.js 在这个文件中，我们配置了我们想要使用的遥控器的 URL（用于开发环境和生产环境）。
在第二个文件中，我们为将保存远程模块并在我们的主机应用程序中呈现它的组件创建路由。我们将为要使用的每个遥控器创建文件。
以下是我们编写这些文件的方式：
在上面的文件中，我们使用常规的 react-router-dom 路由来渲染包含远程应用程序的组件。
就是这样。当我们导航到我们为每个模块配置的路由时，它将在我们的容器应用程序中呈现。
综上所述
在这篇文章中，我想展示如何在应用程序中使用微前端。有很多方法可以实现微前端和模块联合。我们希望实现它有点通用，以便我们将来可以轻松添加更多遥控器。还有更多方面我在这篇文章中没有谈到，也许我以后会写（比如模块之间的通信）。
我希望你喜欢阅读这篇文章。随意添加您的评论。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
