发现最好的工具来帮助您构建出色的微前端。将长期存在的后端整体分解为微服务，可以在后端开发过程中发现效率和规模方面的新发现。然而，当今大多数前端应用程序架构仍然是单一的，因此很难以同样的方式加速和扩展前端开发过程。微前端的想法是将前端整体分解成更小、更易于管理的部分。每个团队都可以端到端地拥有自己的功能，在自己的代码库中工作，独立发布版本，持续提供小的增量升级，还可以通过API与其他团队集成，以便他们可以编写和管理页面和应用程序。微前端有很多方法，从组件的智能构建时集成到使用自定义路由器的运行时集成。在此列表中，我收集了最突出的工具来帮助构建微前端。欢迎在评论中添加反馈或建议！1.Bit允许您从独立组件编写和管理前端。这可能是列表中最受欢迎和最受欢迎的精心制作的解决方案。如果您查看bit.dev主页，您会注意到它是由不同团队在不同代码库中构建的独立组件，所有这些组件集成在一起以创建一个有凝聚力的产品。>示例——使用Bit组件的微前端BitCLI是一种广泛流行的组件驱动开发工具。使用位，您可以构建、集成和组合独立的组件。虽然微前端通常被认为是在运行时发生的组合，但bit可以让开发人员有效地组合构建时前端以享受两全其美：“传统单体”的安全性和健壮性以及micro前端的简单性和可扩展性。使用Bit，不同的团队可以独立构建、发布和公开组件，同时与其他团队协作，将Web开发过程转变为功能和组件的模块化组合。除了OSS工具的组件驱动开发工具外，Bit还为团队提供了一个云平台，供团队在组件上构建变更和协作，以便可以有效地管理和扩展它们，同时让所有团队完全独立于自主交付。为了确保每个前端都有自己独立且快速的构建过程，还提供了一个独特的CI/CD过程，该过程是100%组件驱动的，这意味着不同的团队可以安全地集成更改，而无需等待、争夺控制权或破坏任何东西。开发人员可以持续安全地将更改传播到所有受影响的应用程序中的组件。>组件驱动的CI：X50Faster因此，工作流通过简单的解耦编解码器、自治团队、小型定义的API、独立发布管道和持续增量升级得到增强。如果您的团队正在使用组件进行构建，并且正在寻找一种可以解锁微前端和模块化工作的解决方案，请务必查看您可能需要的Bit的OSS工具和平台。2.WebPack5和联合多个单独构建的模块应形成一个应用程序。这些单独的构建不应该相互依赖，因此它们可以独立开发和部署。La微前端。ModuleSyndication是ZackJackson发明的一种JavaScript架构，然后提议为其创建一个WebPack插件。WebPack团队帮助将该插件引入了目前处于Beta阶段的WebPack5。简而言之，模块联合允许JavaScript应用程序在运行时从另一个应用程序动态导入代码。该模块将构建一个独特的JavaScript入口文件，其他应用程序可以通过设置WebPack配置来下载该入口文件。它还通过启用依赖共享来解决代码依赖和增加的包大小。例如，如果您正在下载一个React组件，您的应用程序将不会导入React代码两次。该模块将巧妙地使用您已有的React源代码，并且只导入组件代码。最后，如果出于某种原因导入代码，您可以使用React.Lazy和React.Suspense提供回退，如果出于某种原因，请确保用户体验不会因版本控制而中断。这为构建微型前端释放了一些非常有益的潜力。3.单页面应用程序SPA单个SPA将自己定义为“用于前端微服务的JavaScript框架”。简而言之，它适用于每个应用程序的生命周期。每个应用程序都可以响应URL路由事件，并且必须知道如何从DOM引导、装载和卸载自身。传统SPA和单级SPA应用程序之间的主要区别在于它们必须能够与其他应用程序共存，并且它们不各自有自己的HTML页面。因此，如果您想将不同的前端或框架放入一个DOM中并打算在运行时集成，请查看这个有趣的实验。4.SystemJSSystemJS不是一个微框架，但它确实提供了独立模块的跨浏览器管理的解决方案，这是实现MFS的关键（也是单个SPA实际使用的）。Systemjs可以被认为是JS模块的导体。它允许我们使用不同的JS模块相关功能，例如动态导入、导入映射等，而不依赖于本机浏览器支持——并且所有这些都具有接近本机的性能。一些值得注意的功能包括针对旧浏览器的polyfill、使用名称的模块（通过映射到路径）以及对多个JS模块的单个网络请求（通过使用其API将多个模块设置到单个文件中）。它还提供对其“模块注册表”的轻松访问，让您随时了解浏览器中可用的模块。看一看。5.Piral.Piral的目标是使您可以轻松地使用微前端构建门户应用程序。Piral使您能够创建一个模块化的前端应用程序，该应用程序可以在运行时使用称为off-caps的解耦模块进行扩展，从而利用微前端架构。Pilets可以独立开发，具有必要的代码和所有其他相关资产。先决条件非常好，作为开发人员，您只需要您喜欢的编辑器、终端、互联网浏览器和Node.js。Piral实例（应用程序外壳）和Pilets（应用程序外壳）可以在本地开发机器上的模拟器中执行和调试。6.开放组件开放组件项目宣布其目标为“前端世界中的无服务器架构”。更具体地说，OC旨在成为微前端的框架，在一个地方提供所需的一切，使其成为一个丰富而复杂的系统，包括从组件处理到注册表到模板甚至CLI工具的工具。OpenComponents有两部分：Components是小单元代理代码，主要由HTML、JavaScript和CSS组成。它们可以选择包含一些逻辑，允许服务器端node.js应用程序组合模型以呈现视图。呈现时，它们是纯HTML，可以注入到任何HTML页面中。消费者是需要组件在其网页中呈现部分内容的网站或微型基金（所有通过前门服务或任何路由机制连接的小型可部署网站）。7.QiankunQiankun说它是“基于SPA的微前端实现，但使其准备就绪”。本项目旨在解决小应用组合大应用的主要问题，如发布静态资源、集成各个子应用、确保子应用在开发和部署过程中相互独立、运行时隔离、处理公共依赖，处理性能问题等。在中国传统文化中，乾坤代表天，坤代表地，所以乾坤就是宇宙。A...8.LuigiLuigi是一个微前端JavaScript框架，使您能够创建由本地和分布式视图驱动的管理用户界面。Luigi允许Web应用程序与应用程序中包含的微前端进行通信。为确保通信顺利进行，您可以配置路由、导航、授权和UX元素等设置。Luigi由Luigi核心应用程序和Luigi客户端库组成。他们使用PostMessageAPI在核心应用程序和微前端之间建立安全通信。找到你自己。这是一个测试游乐场，可让您了解其工作原理。尝试一下，看看SAP在GitHub上的这个伟大项目。9.FrintJSFrintjs是“用于构建可扩展和反应式应用程序的模块化JavaScript框架”。它允许您从单独的Bundler加载应用程序，为您的应用程序提供结构，并处理诸如路由、依赖项等现实主义问题。该项目还通过其他包支持RN和Vue，但它主要记录和测试React。在此处的现场演示游乐场上试用，或访问Github上的项目以了解更多信息。10.Mosaic9Mosaic是一组服务、库和规范，定义了其组件如何相互交互以支持大型网站的微服务式架构。Mosaic使用单独的服务片段并在运行时根据模板定义组合它们。它由一堆处理不同问题的包组成，例如路由、布局、模板存储甚至呈现UI。11.PuzzleJSPuzzlejs是“一个用于可扩展和快速网站的微前端框架”。它允许您创建相互通信的网关和店面项目。它在微观方向上受到Facebook的BigPipe的启发。PuzzleJS提供创建网关或店面（彼此独立）并通过提供配置文件连接它们。它允许您在编译时将HTML模板编译成JavaScript函数。此操作完全独立于请求，因此Puzzlejs可以使用此函数发送第一个块。它也是SEO友好的，并且在服务器端编写和呈现。而且，当片段所需的API下降时，PuzzleJs保证其他页面片段仍在工作。这是一个真实的例子。
