微前端将整个前端分解为许多更小、更易于管理的部分。每个团队可以端到端拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以持续进行小的增量升级，也可以通过API与其他团队集成，从而形成共同和管理页面和应用程序。在这篇文章中，作者收集了11个最优秀的构建微前端的工具，并提供了链接和视频以供进一步学习。将单体式后端分解为微服务后，后端开发过程在效率和规模上取得了显着提升。然而，当今大多数前端应用程序架构仍然是单一的，这使得前端开发过程难以加速和扩展。微前端的想法是将前端整体分解成许多更小、更易于管理的部分。每个团队可以端到端拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以持续进行小的增量升级，也可以通过API与其他团队集成，从而形成共同和管理页面和应用程序。微前端有很多方法，从智能构建时组件集成到使用自定义路由的运行时集成等等。在本文的列表中，作者收集了用于构建微前端的最优秀的工具。欢迎读者在评论中补充反馈或建议！1.BitBit允许您从独立组件构建和管理前端。它可能是列表中最受欢迎的生产就绪解决方案。如果您查看bit.dev主页，您会发现它由许多单独的组件组成。这些组件由不同的团队在不同的代码库中构建，最终集成在一起以创建一个有凝聚力的产品。BitCLI是一种广泛流行的组件驱动开发工具。使用Bit，您可以构建、集成和组合独立的组件。虽然人们通常认为微前端是在运行时发生的组合，但Bit允许开发人员在构建时有效地组合前端以享受两全其美：“传统单体前端”的安全性和健壮性，以及微前端的简单性和可扩展性前端。使用Bit，不同的团队可以在与其他团队协作的同时独立构建、发布和公开他们的组件，这将Web开发过程变成了功能和组件的模块化组合。除了用于组件驱动开发的OSS工具，Bit还为团队提供了一个云平台，使团队能够在组件上构建变更和协作，高效地管理和扩展开发过程，同时保持所有团队完全独立，团队可以自主交付。为了确保每个前端都有自己独立且快速的构建过程，Bit还提供了一个独特的CI/CD过程，该过程是100%组件驱动的，这意味着不同的团队可以安全地集成更改而无需等待，争取掌握或破坏任何东西.开发人员可以持续安全地将更改传播到所有受影响的应用程序中的组件。因此，工作流通过简单的解耦代码库、自治团队、小型定义明确的API、独立发布管道和持续增量升级得到增强。如果您的团队使用组件开发软件，并且您正在寻找一种解决方案来解锁微前端和在大型应用程序上进行模块化工作，请务必查看Bit的OSS工具和平台，它可能正是您所需要的。项目链接：https://github.com/teambit/bit2。Webpack5和ModuleFederation的多个单独构建最终将形成一个应用程序。这些单独的构建不应相互依赖，因此可以独立开发和部署。ModuleFederation是ZackJackson发明的一个JavaScript框架，后来他提议为它创建一个Webpack插件。Webpack团队帮助将此插件引入了Webpack5，该插件目前处于Beta测试阶段。项目链接：https://webpack.js.org/concepts/module-federation/简而言之，ModuleFederation允许JavaScript应用程序在运行时从另一个应用程序动态导入代码。该模块将构建一个独特的JavaScript入口文件，其他应用程序可以通过设置Webpack配置项来下载该文件。它还通过启用依赖共享来解决代码依赖和增加的包大小。例如，如果您正在下载React组件，您的应用程序不会导入React代码两次。模块将自动使用您现有的React源，仅额外导入组件代码。最后，您可以使用React.lazy和React.suspense提供回退，以确保如果导入的代码由于某种原因失败，构建不会影响用户体验。这种架构释放了构建微前端的巨大潜力。您可以在以下文章中阅读更多内容并查看示例。使用Webpack5、ModuleFederation和Bit革新微前端：https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb03。SingleSPASingleSPA将自己定义为一个“前端微服务Javascript框架”。简而言之，它将生命周期应用于每个应用程序。每个应用程序都可以响应url路由事件，并且知道如何从DOM中引导、加载和卸载自身。传统SPA和单一SPA应用程序之间的主要区别在于它们能够与其他应用程序共存，并且每个应用程序都没有自己的HTML页面。因此，如果您希望将不同的前端或框架整合到一个DOM中并希望在运行时集成，请查看这个有趣的实验。https://youtu.be/L4jqow7NTVg您可以在此处查看一些示例：https://github.com/react-microfrontends项目链接：https://github.com/single-spa/single-spa4。SystemJSSystemJS不是微前端的前端框架，但它确实提供了跨浏览器独立模块管理的解决方案。这个解决方案是实现MF的关键（并且实际上也被Singe-spa使用）。将SystemJS视为JS模块的协调者。它允许我们使用与JS模块相关的不同特性，例如动态导入和导入映射，而不依赖原生浏览器的支持，并且所有这些都具有接近原生的性能。一些值得注意的功能包括用于旧版浏览器的polyfill、使用名称的模块导入（通过将名称映射到路径）以及对多个JS模块的单个网络请求（通过使用其API将多个模块设置为单个文档）。它还提供对其“模块注册表”的轻松访问，因此您可以跟踪浏览器中可用的模块。项目链接：https://github.com/systemjs/systemjs5。PiralPiral的目标是让您可以轻松地使用微前端构建门户应用程序。您可以使用Piral创建模块化前端应用程序，并利用称为pilet的解耦模块在运行时扩展微前端架构。用户可以独立开发pilet，以及必要的代码和所有其他相关资产。这是一个现场演示：https://youtu.be/SkKvpBHy_5IPiral先决条件非常宽松，开发人员只需要安装他们喜欢的编辑器、终端、网络浏览器和Node.js。开发者可以在本地开发机的模拟器中执行和调试Piral实例（应用shell）和piltes（功能模块）。项目链接：https://github.com/smapiot/piral6。OpenComponentOpenComponent（简称OC）项目宣布了其“前端世界无服务器”的目标。更具体地说，OC旨在成为一个一站式微前端框架，使其成为一个丰富而复杂的系统，包括从组件处理到注册表到模板甚至CLI工具的所有内容。OpenComponents有两部分：组件是同构代码的小单元，主要由html、javascript、css组成。它们可以选择包含允许服务器端node.js应用程序组合模型以呈现视图的逻辑。渲染后，它们是纯html片段，可以插入到任何html页面中。消费者是网站或微型网站（所有通过前门服务或路由机制连接的可独立部署的小型网站）。这些站点需要组件在其页面中呈现某些内容。在此处查看更多信息：https://github.com/opencomponents/oc7。QiankunQiankun声称是“基于single-spa的微前端实现，但已使single-spa生产就绪”。该项目旨在解决从较小的子应用程序组合较大的应用程序时面临的一些主要问题，例如发布静态资源、集成单个子应用程序、确保子应用程序在开发和部署过程中相互独立以及运行时是相互隔离，处理共同的依赖关系，处理性能问题等。项目链接：https://github.com/umijs/qiankun8。LiugiLuigi是一个微前端JavaScript框架，可用于创建由本地和分布式视图驱动的管理UI。Luigi允许Web应用程序与应用程序中包含的微前端进行通信。为确保通信顺畅，您可以配置路由、导航、授权和UX元素等设置。Luigi由一个LuigiCore应用程序和一个Luigi客户端库组成。他们使用postMessageAPI在核心应用程序和微前端之间建立安全通信。更多信息，请自行查看。这是一个TestPlayground，您可以在其中亲身体验它的工作原理。https://fiddle.luigi-project.io/#/home/overview试一试，也可以在GitHub上查看这个不错的SAP项目：项目链接：https://github.com/SAP/luigi9.FrintJSFrintJSis"A用于构建可扩展和响应式应用程序的模块化JavaScript框架”。您可以使用它从不同的打包器加载应用程序，为应用程序提供结构，并处理路由、依赖关系等问题。该项目通过附加包支持RN和Vue，但文档和测试大多是特定于React的。您可以访问以下GitHub项目了解更多信息。项目链接：https://github.com/frintjs/frint10。MosaicMosaic是一组服务、库和规范，定义了其组件如何相互交互以支持大型网站的微服务架构。Mosaic使用了Fragments的机制，由各个服务程序提供服务，并在运行时根据模板定义进行组合。它由一堆处理不同问题的包组成，例如路由、布局、模板存储，甚至呈现UI。欲了解更多信息，请参阅下面的链接。项目链接：https://www.mosaic9.org/11。PuzzleJSPuzzleJS是“一个用于可扩展和快速站点构建的微前端框架”。您可以使用它来创建相互通信的网关和店面项目。它受到Facebook的BigPipe的启发，向微前端方向发展。PuzzleJs提供了创建网关或店面（彼此独立）以及提供配置文件来连接它们等功能。您可以使用它在编译时将html模板编译为javascript函数。此操作完全独立于请求，因此PuzzleJ可以使用此函数发送第一个块。它也是SEO友好的，准备好并在服务器端呈现。此外，PuzzleJs保证其他页面片段在片段所需的api失败时仍然有效。这是一个真实的例子。项目链接：https://github.com/puzzle-js/puzzle-js英文原文：https://itnext.io/11-micro-frontends-frameworks-you-should-know-b66913b9cd20
