微前端背后的想法是将Web项目的整体客户端分成更易于管理的较小部分。通过这种方法，项目中涉及的每个团队都有自己的工作领域，这些团队仅负责项目的某个部分，并且完全独立地参与其开发。因此，每个团队都独立于其他团队使用自己的代码库，发布其子系统的新版本，并不断对其进行较小的增量改进。该子系统与其他团队正在处理的应用程序的其他片段的集成是通过API进行的。通过这种工作方案，项目的接口部分由相互协作的独立片段组成。
丹·阿布拉莫夫（Dan Abramov）于去年五月写道在他的Twitter上，他不了解微观领域。他认为，他们应该解决的问题已经通过良好的组件模型解决了。“也许微战线是解决组织问题的解决方案，而不是技术问题？例如，当两个开发团队无法就任何事情达成共识，包括项目的基础架构时，”他说道。
微前端开发有很多方法：从项目构建期间的组件智能集成到通过使用特定的路由方法在代码执行期间组织应用程序不同部分的协作。在本文中，我收集了旨在开发微前端设备的最著名的工具。
1.位平台
Bit平台使您可以从独立的组件中组装前端。它可以帮助您设计和管理组件。这可能是我列表中最受欢迎的解决方案，并且是为生产开发准备的最好的解决方案。
如果查看bit.dev的主页，您会注意到它是由独立的组件组装而成的。这些组件由不同的团队创建，并且在这些组件后面具有不同的代码库。但是它们都相互集成在一起，最终使您可以形成一个整体的项目界面。
使用组件创建的首页bit.dev，是借助Bit
Command Line Tool Bit（一种用于基于组件进行开发的流行软件）进行组织的工作。使用Bit，您可以创建组件并从中组装接口。
微前端通常被理解为在执行项目代码期间组装接口。 Bit平台旨在在项目构建过程中形成前端。这给使用该平台的用户提供了以安全性和可靠性形式存在的“传统整体”的有用功能，以及微型前端解决方案的优势-解决方案的简单性和可扩展性。
使用Bit，不同的团队可以独立创建和发布自己的组件，并在组件API级别与其他团队进行交互。这使您可以将Web开发变成从单独的模块构建项目的过程。
除基于组件的开发工具外，Bit项目还为开发人员提供了基于云的平台。该平台使您可以在组件上进行协作，有效地管理开发流程并进行扩展。同时，参与某个项目自己部分工作的团队保持完全独立。
Bit提供了一个完全基于组件的独特CI / CD流程，旨在组织项目的快速组装。这意味着不同的团队可以在不担心对项目造成负面影响的情况下，对他们所开发项目的各个部分进行更改。他们不必等待其他团队或竞争项目主分支的更改。开发人员可以连续而安全地进行更改，而不必担心会弄乱他们未执行的项目部分。这些更改适用于使用这些组件的所有应用程序。
基于组件的持续集成系统比传统系统快50倍
，因此开发过程具有以下功能：
- 一个简单的代码库，具有彼此独立的独立部分。
- 自治团队。
- 紧凑，定义明确的API。
- 发布成品组件的独立过程。
- 组件不断改进的可能性。
这是一个类似的项目工作组织示例。
如果您的团队正在基于组件的开发中寻找一种可以利用微前端技术和模块化方法来处理大型应用程序的解决方案，那么我建议您看看Bit平台。这很可能正是您所需要的。
2.Webpack 5和模块联合架构
JavaScript体系结构模块联合会（MF）由Zach Jackson提出。他还发起了一个Webpack插件的创建，以实现该架构。由于webpack团队的努力，该插件出现在Webpack 5中，现在处于测试阶段。
MF的要点是多个单独的程序集应构成一个应用程序。这些单独的程序集不应相互依赖，这使您可以分别开发和部署它们。这是一个前线风格的方案。
使用MF允许JavaScript应用程序在运行时从其他应用程序动态导入代码。该模块创建一个文件以导出其功能，该文件是其他应用程序可以加载的代码的入口点。这是通过相应地配置webpack来完成的。
除其他事项外，这种方法通过组织依赖性共享解决了代码依赖性问题和捆绑大小增加的问题。例如，如果加载React组件，则已经导入React的应用程序将不会重新导入库代码。系统将使用已经导入的React代码，并且仅导入组件代码。最后，如果导入的代码由于某种原因失败，则可以使用React.lazy和React.suspense提供后备功能。即使项目依赖的程序集不起作用，这也将有助于确保正确的用户体验。
模块联合架构为微前端开发提供了非常有趣的可能性。有关此体系结构的详细信息及其使用示例，请参见此处。
3.单温泉项目
单个spa 项目的创建者将其定义为“在前端开发中使用微服务的JavaScript框架”。如果我们简单地描述其本质，那么我们可以说它实现了将某个实体的生命周期应用于每个组成项目的单个应用程序的想法。每个应用程序都可以响应路由事件，并且需要知道如何进行部署，在DOM中进行安装以及如何从DOM中进行卸载。常规SPA（单页应用程序）与使用单一SPA所获得的主要区别在于，单一SPA应用程序必须能够与项目中的其他应用程序共存。但是，这些应用程序没有自己的HTML页面。
结果，事实证明，如果您需要在同一页面上使用需要在运行时相互集成的不同框架或库，则应查看Single-Spa。这是一个视频，提供有关项目的基本信息。一些示例可以在这里找到。
4. SystemJS模块加载器
SystemJS 模块加载器不是用于微前端开发的框架，但该项目解决了独立模块的跨浏览器管理的问题，这是实现微前端体系结构的关键（此方法实际上也用于单spa）。
可以将SystemJS视为JS模块协调器。它允许您使用这些模块的各种功能，例如动态导入和导入映射，而无需依赖标准的浏览器机制。所有这些-性能水平接近浏览器的内置功能所提供的水平。在SystemJS的有趣功能中，我们可以注意到存在针对过时浏览器的polyfill，使用名称导入模块（通过匹配模块名称和它们的路径），通过一个请求加载多个模块（使用API将多个模块表示为一个文件）。
SystemJS还允许您使用“模块注册表”，以便开发人员可以在任何给定时间知道浏览器中可用的模块。这里 SystemJS入门教程。
5.框架
Piral 框架旨在使用微前端技术促进门户应用程序的开发。通过Piral，您可以创建模块化的前端应用程序，这些应用程序可以在运行时使用微前端体系结构以及称为独立的模块进行扩展。票证可以独立于系统的其他部分开发，包括代码和其他必要的资源。这是一个演示如何使用Piral的视频。
如果要使用Piral，则只需要一个代码编辑器，终端，浏览器和Node.js。可以在本地开发计算机上的仿真器中运行和调试Piral实例（应用程序包装器）和桩（模块）。
与Piral合作
6.开放组件项目
开放组件 项目旨在“将无服务器技术带入前端世界”。更准确地说，这个项目是作为开发微前端产品的框架而创建的，该框架为开发人员提供了他所需要的一切，并创建了一个生态系统，其中包括用于处理组件的工具，组件注册表，模板，甚至是命令行工具。开放组件项目包含两个部分：
- components () — , , , , HTML, JavaScript CSS. , , - , Node.js- , . HTML-, -.
- consumers () — - (, -, , ), - -.
7. Qiankun
Qiankun 项目被描述为“基于单个spa的微前端实现，但已准备好用于生产。” 该项目旨在解决与从小型子系统（子应用程序）组装大型应用程序相关的一些基本问题。这些任务包括发布静态资源，合并子系统，确保子系统在开发和部署过程中彼此独立，确保代码执行过程中子系统隔离，处理依赖关系以及确保解决方案的高性能。
前昆项目
8. Luigi框架
Luigi是用于微前端开发的以业务为重点的JavaScript框架，可让您创建使用本地和外部组件的用户界面。Luigi是一个Web应用程序开发框架，它独立于特定的框架和库。该框架为开发人员提供了确保应用程序各个部分协同工作的方法。
Luigi Luigi
框架包含两个子系统。这是主要的应用程序和客户端库。它们之间的交互基于postMessage API。
这是一个沙箱，您可以在其中试用Luigi。而这里是项目库。顺便说一句，SAP正在努力。
9. FrintJS框架
FrintJS是“用于开发可伸缩的反应式应用程序的模块化JavaScript框架”。它允许您加载由各种捆绑程序编译的应用程序，帮助结构化应用程序，并使路由和依赖项处理等机制正常运行。除了React（此库的工作已得到很好的文档证明和测试）之外，该框架还通过其他软件包支持React Native和Vue。
FrintJS
→这是FrintJS交互式沙箱
10.马赛克9
Mosaic是由规范结合在一起的一组服务和库，这些规范定义了在组织使用微服务架构构建的大型网站时组件如何交互。Mosaic使用所谓的“片段”，这些片段由单独的服务维护，并在运行时根据模板中指定的顺序进行组合。
Mosaic体系结构Mosaic
项目由旨在解决各种问题的各种程序包表示。其中-路由，页面布局的形成，模板的存储，界面的表示。
11.框架PuzzleJS
PuzzleJS是“用于开发可扩展且快速的网站的微前端框架”。它允许您创建相互通信的称为“网关”和“接口”（店面）的项目。 PuzzleJS的创建者从Facebook BigPipe项目中获得了关于微前端架构的灵感。
PuzzleJS
PuzzleJS允许您通过使用配置文件来自定义它们的交互来创建独立的“门户”和“接口”。它允许您在编译时将HTML模板转换为JavaScript函数。此操作与数据加载请求无关。结果，该功能响应于请求而开始非常快速地传输数据，这改善了网页的性能指标，如到第一个字节的时间。由于使用了服务器端材料渲染，因此该框架在SEO方面很好。另外，如果操作页面的某个片段所需的API停止响应请求，那么这不会中断其他片段的工作。这是使用PuzzleJS的真实示例。
结果
可用于微前端开发的其他框架包括Podium。
如您所见，如果您决定创建基于微前端架构的项目，那么您肯定有很多选择。
您对微战线感觉如何？
