发现帮助您构建出色微前端的最佳工具。
微前端的想法是将前端单体分解成更小、更易于管理的部分。每个团队都可以拥有自己的端到端功能，在自己的代码库中工作，独立发布版本，不断提供小的增量升级，还可以通过 API 与其他团队集成，以便他们可以一起编写和管理页面和应用程序。
在此列表中，我收集了最突出的工具来帮助构建微前端。欢迎在评论中添加您的反馈或建议！
1. Bit
Bit 允许您从独立组件编写和管理前端。它可能是采用微前端列表中最受欢迎和生产就绪的解决方案。Bit 绝对是个神器，功能很强大， Read: “ How We Build Micro Frontends”
如果你看一下 bit.dev 主页你会注意到它是由不同的团队在不同的代码库中构建的独立组件组成的，并且都集成在一起以创建一个有凝聚力的产品。
Bit CLI 是一种广泛流行的组件驱动开发工具。使用 Bit，您可以一起构建、集成和组合独立的组件
2. Webpack 5 和模块联合
Module Federation 是 Zack Jackson 发明的 JavaScript 架构，他随后提议为其创建一个 Webpack 插件。Webpack 团队帮助将该插件引入 Webpack 5
简而言之，模块联合允许 JavaScript 应用程序在运行时从另一个应用程序动态导入代码。该模块将构建一个唯一的 JavaScript 入口文件，其他应用程序可以通过设置 Webpack 配置来下载该文件。
它还通过启用依赖项共享来解决代码依赖关系和增加捆绑包大小的问题。例如，如果你正在下载 React 组件，你的应用程序不会导入 React 代码两次。该模块将巧妙地使用您已有的 React 源代码，并且只导入组件代码。最后，如果导入的代码由于某种原因失败，您可以使用 React.lazy 和 React.suspense 提供回退，确保用户体验不会因构建失败而中断。
这为构建微前端释放了一些非常巨大的潜力。您可以在此处阅读有关它的更多信息并查看本文中的示例：
3. Single SPA
Single SPA 将自己定义为“前端微服务的 Javascript 框架”。简而言之，它将生命周期应用于每个应用程序。每个应用都可以响应 url 路由事件，并且必须知道如何从 DOM 引导、挂载和卸载自身
传统 SPA 和单 SPA 应用程序之间的主要区别在于，它们必须能够与其他应用程序共存，并且它们并非各自都有自己的 HTML 页面。
因此，如果您希望将不同的前端或框架组合到一个 DOM 中，并打算在运行时进行集成，请查看这个有趣的视频。
你可以在这里查看一些例子。而且，这里是项目：
4. Systemjs
SystemJS 不是一个微型前端框架，但它确实为独立模块的跨浏览器管理提供了解决方案，这是实现 MF 的关键（实际上也被 single-spa 使用）。
SystemJS 可以看作是 JS 模块的编排器。它允许我们使用不同的 JS 模块相关功能，例如动态导入、导入映射等，而无需依赖原生浏览器支持——所有这些都具有接近原生的性能。一些值得注意的功能包括旧浏览器的 Polyfill、使用名称的模块导入（通过将名称映射到路径）以及多个 JS 模块的单个网络请求（通过使用其 API 将多个模块设置为单个文件）。
它还提供了对其“module registry”的轻松访问，让您随时知道浏览器中有哪些模块可用。看一看。
5. Piral
Piral 的目标是让您使用微前端轻松构建门户应用程序。Piral 使您能够创建一个模块化前端应用程序，该应用程序在运行时使用称为 pilets 的解耦模块进行扩展，利用微前端架构。堆可以独立开发，并附带必要的代码以及所有其他相关资产。下面是一个现场演示：
先决条件相当不错，作为开发人员，您只需要安装您最喜欢的编辑器，终端，Internet浏览器和Node.js。Piral 实例（应用程序 shell）和 pilets（功能模块）可以在本地开发计算机上的模拟器中执行和调试。
6. Open Components
Open Components 项目宣称其目标是“前端世界的无服务器”。更具体地说，OC 旨在成为微前端的框架，在一个地方提供您需要的一切，使其成为一个丰富而复杂的系统，包括从组件处理到注册表再到模板甚至 CLI 工具的任何工具。OpenComponents 包含两个部分：
Open Components 项目宣称其目标是“前端世界的无服务器”。更具体地说，OC 旨在成为微前端的框架，在一个地方提供您需要的一切，使其成为一个丰富而复杂的系统，包括从组件处理到注册表再到模板甚至 CLI 工具的任何工具。OpenComponents 包含两个部分：
- components 是同构代码的小单元，主要由 html、javascript、css 组成。它们可以选择性地包含一些逻辑，允许服务器端 node.js 应用程序编写用于呈现视图的模型。渲染后，它们是要注入任何 html 页面的纯 html 片段。
- consumers是网站或微型网站（可独立部署的小型网站，所有网站都通过前门服务或任何路由机制连接），它们需要组件来呈现其网页中的部分内容。请看这里
7. Qiankun
Qiankun 表示，它是Micro Frontends 的实现，基于 single-spa，但使其可用于生产”。本项目旨在解决从较小的子应用程序组成较大的应用程序的一些主要问题，例如发布静态资源、集成单个子应用程序、确保子应用程序在开发和部署过程中相互独立且运行时隔离、处理公共依赖、处理性能问题等。
8. Luigi
Luigi 是一个微型前端 JavaScript 框架，可用于创建由本地和分布式视图驱动的管理用户界面。Luigi 允许 Web 应用程序与应用程序包含的微前端进行通信。为确保通信顺利进行，您可以配置路由、导航、授权和 UX 元素等设置。
Luigi 由 Luigi Core 应用程序和 Luigi Client 库组成。它们使用 postMessage API 在核心应用程序和微前端之间建立安全通信。自己看看吧。
这是一个测试游乐场，可让您亲身体验其工作原理。试试看，并在 GitHub 上查看 SAP 的这个不错的项目：
9. FrintJS
FrintJS 是“一个模块化的 JavaScript 框架，用于构建可扩展和响应式应用程序”。它允许您加载来自单独捆绑器的应用程序，为您的应用程序提供结构，并处理路由、依赖关系等一系列问题。该项目还通过额外的包支持 RN 和 Vue，但它主要是针对 React 进行记录和测试。
在此处的现场演示 Playground 中试用，或访问 GitHub 上的项目以了解更多信息。
10. Mosaic 9
Mosaic 是一组服务、库以及定义其组件如何相互交互的规范，以支持大型网站的微服务风格架构。Mosaic 使用由单独服务提供服务的片段，并在运行时根据模板定义组合在一起。
它由一堆包组成，这些包包括处理不同的问题，例如路由、布局、模板存储，甚至展示 UI。自己看看吧
11. PuzzleJS
PuzzleJS 是“用于可扩展和快速网站的微型前端框架”。它允许您创建相互通信的网关和店面项目。它的灵感来自Facebook的BigPipe，朝着微前端的方向发展。
PuzzleJs 提供的功能包括创建网关或店面（彼此独立）并通过提供配置文件来连接它们。它允许您在编译时将 html 模板编译为 javascript 函数。此操作完全独立于请求，因此 PuzzleJs 可以使用此函数发送第一个块。它对 SEO 也很友好，并在服务器端准备和呈现。而且，当片段所需的 API 关闭时，PuzzleJs 保证其他页面片段仍将工作。这是一个真实的例子。
在此处观看现场演示或在下面查看 GitHub 上的项目：
