你必须知道的11个微前端框架

翻译者 | Jonathan Saring 翻译者 | Flora 策画 | 蔡芳芳 微后端将后端总体降解为很多更小、较易管理组织工作的短片。每一项目组能起新端地保有她们的机能，能在她们的标识符复本组织工作，能分立正式发布版，能急速展开小的存量升级换代，还能透过 API 与其它项目组软件系统，以期她们能一同重新组建和管理组织工作网页和插件。责任编辑中，翻译者搜集了 11 个最优秀的微后端构筑辅助工具，并提供了进一步自学的镜像和音频。

将乙烯后端降解成为微服务项目之后，后端合作开发业务流程已在工作效率和体量上获得了明显不断进步。不过，现今绝大多数后端插件构架依然是乙烯式的，使后端合作开发业务流程极难快速和扩充。

微后端的设想是将后端乙烯降解为很多更小、较易管理组织工作的短片。每一项目组能起新端地保有她们的机能，能在她们的标识符复本组织工作，能分立正式发布版，能急速展开小的存量升级换代，还能透过 API 与其它项目组软件系统，以期她们能一同重新组建和管理组织工作网页及插件。

微后端有很多方式，从智能化的构筑时模块软件系统，到采用自订路由器的运转时软件系统之类。在责任编辑的条目中，翻译者搜集了最优秀的微后端构筑辅助工具。热烈欢迎听众在文章中加进意见反馈或提议！

Bit 允许你从分立的模块重新组建和管理组织工作后端。它可能是目录上最畅销的、可用作生产（production-ready）的软件系统。

如果查阅 bit.dev 网页，你会发现它由很多分立的模块形成。这些模块由相同项目组，在不同标识符复本构筑，并最后软件系统在一同，缔造了一个结合的产品。

Bit CLI 是广为盛行的辅助工具，用作模块驱动力合作开发。采用 Bit，你能将分立的模块构筑、软件系统和女团到一同。

尽管人们通常将微后端视为在运转时发生的女团，但 Bit 能让合作开发人员在构筑时高效地女团后端，以享受两全其美的优势：“传统乙烯式后端”的安全性和健壮性，以及微后端的简单性 和 可伸缩性。

采用 Bit，在与其它项目女团作同时，相同的项目组能分立构筑、正式发布和公开其模块，这样就能将 Web 合作开发过程转变为机能和模块的模块化女团。

除了 用作模块驱动力合作开发的 OSS 辅助工具 外，Bit 还为项目组提供了一个 云平台，该云平台使项目组能构筑变更并在模块上展开协作，能高效地管理组织工作和扩充合作开发过程，同时保持所有项目组完全分立，项目组可自主交付。

为了确保每一后端都有她们分立且快速的构筑业务流程，Bit 还提供了独特的 CI/CD 业务流程，该业务流程为 100% 模块驱动力，这意味着相同的项目组能安全地软件系统更改，而不必等待，争夺主控权或打破任何东西。合作开发人员能在所有受影响的插件中持续和安全地将更改传播到模块。

作为结果，透过 简单的解耦标识符库、自治项目组、小型定义良好的 API、分立的正式发布管道 和 持续存量升级换代，增强了组织工作业务流程。能查阅如下示例。

《我们怎样构筑微后端》

https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc

如果你的项目组采用模块来合作开发软件，并且正在寻找一种能在大型插件上解锁微后端和模块化组织工作的软件系统，请务必查阅 Bit 的 OSS 辅助工具和平台，这可能正是你所需要的。

https://github.com/teambit/bit

多个单独的构筑最后要形成一个插件。这些单独的构筑不应相互依赖，因此能单独合作开发和部署。

Module Federation 是 Zack Jackson 发明的 JavaScript 构架，Zack Jackson 随后提出为其创建一个 Webpack 插件。Webpack 项目组提供帮助将该插件引入了 Webpack 5，目前处于 beta 测试阶段。

https://webpack.js.org/concepts/module-federation/

简而言之，Module Federation 允许 JavaScript 插件在运转时从另一个插件动态导入标识符。模块将构筑唯一的 JavaScript 入口文件，其它插件能透过设置 Webpack 配置项来下载该入口文件。

它还透过启用依赖关系共享来解决标识符依赖关系和包大小增加的问题。例如，如果你要下载一个 React 模块，那么你的插件不会两次导入 React 标识符。模块将自动采用你已有的 React 源，仅额外导入模块标识符。最后，你能采用 React.lazy 和 React.suspense 提供后备机能，以确保当导入的标识符由于某种原因失败后，不会因构筑失败而影响用户体验。

这个构架释放了构筑微后端的巨大潜力。你能在如下文章中阅读更多信息和查阅示例。

采用 Webpack 5、Module Federation 和 Bit 变革微后端：

https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb0

Single SPA 将她们定义为一种“后端微服务项目 Javascript 架构”。简言之，它将生命周期应用作每一插件。每一插件都能响应 url 路由器事件，并且知道如何从 DOM 引导，加载和卸载自身。传统 SPA 和 Single SPA 插件之间的主要区别在于它们能够与其它插件共存，并且它们各自没有她们的 HTML 网页。

因此，如果你希望将相同的后端或架构整合到一个 DOM 中，并希望在运转时展开软件系统，请查阅这个有趣的实验。

https://youtu.be/L4jqow7NTVg

你能在这里查阅一些示例：

https://github.com/react-microfrontends

https://github.com/single-spa/single-spa

SystemJS 不是微后端架构，但它确实为跨浏览器的分立模块管理组织工作提供了软件系统。这种解决方案是实现 MF 的关键（并且实际上也被 Singe-spa 采用）。

能将 SystemJS 视为 JS 模块的协调器。它使我们无需依赖本机浏览器支持，即可采用与 JS 模块相关的相同机能，诸如动态导入和导入映射等，并且所有这些都具有接近本机的性能。一些值得注意的机能包括用作较旧浏览器的 Polyfill，采用名称的模块导入（透过将名称映射到路径）以及对多个 JS 模块的单个网络请求（透过采用其 API 将多个模块设置为单个文件）。

它还提供便捷的方式访问其“模块注册表”，以期你随时了解浏览器中哪些模块是可用的。

https://github.com/systemjs/systemjs

Piral 的目标是让你能采用微后端轻松构筑门户插件。你能采用 Piral 创建模块化后端插件，并利用微后端体系结构在运转时采用称为 pilets 的解耦模块展开扩充。用户可以分立合作开发一个 pilet，并附带必要的标识符以及所有其它相关资产。这是一个现场演示：

https://youtu.be/SkKvpBHy_5I

Piral 所要求的前提条件相当宽松，合作开发人员仅需要安装喜欢的编辑器、终端、网络浏览器和 Node.js 即可。合作开发者能在本地合作开发机的仿真器中执行和调试Piral instance（插件外壳）和 piltes（机能模块）。

https://github.com/smapiot/piral

Open Component（简称 OC）项目宣布其目标是“后端世界中的无服务项目器”。更具体地说，OC 旨在成为一个一站式微后端架构，从而使其成为一个丰富而复杂的系统，其中包括从模块处理到注册表、再到模板、甚至包括 CLI 辅助工具。OpenComponents 有两个部分：

components 是同构标识符的小单元，主要由 html、javascript、css 组成。它们能选择包含一些逻辑，从而允许服务项目端的 node.js 应用去重新组建用作呈现视图的模型。在渲染之后，它们就是纯 html 短片，能插入到任何 html 网页中。

consumers 是网站或微型网站（所有小型可分立部署的网站，这些网站均透过前门服务项目或路由器机制连接）。这些网站需要在其网页中呈现部分内容的模块。请查阅这里以了解更多信息：

https://github.com/opencomponents/oc

Qiankun 声称她们是“一个 微后端 实现，基于 single-spa，但已使 single-spa 可用作生产（production-ready）”。该项目旨在解决由较小的子插件组成较大的插件时所面临的一些主要问题，例如正式发布静态资源、软件系统单个子插件、确保子插件在合作开发和部署过程中彼此分立且运转时相互隔离、处理公共依赖性和处理性能问题等。

https://github.com/umijs/qiankun

Luigi 是一个微后端 JavaScript 架构，你能采用它创建由本地和分布式视图驱动的管理组织工作用户界面。Luigi 允许 Web 插件与插件包含的微后端展开通信。为了确保通信顺利展开，你能配置路由器、导航、授权和 UX 元素等设置。

Luigi 由 Luigi Core 插件

这是一个 测试乐园 (Test Playground)，你能在这里亲身体验它的组织工作原理。

https://fiddle.luigi-project.io/#/home/overview

尝试一下，也可在 GitHub 上查阅这个不错的 SAP 项目：

https://github.com/SAP/luigi

FrintJS 是“用作构筑可伸缩和响应式插件的模块化 JavaScript 架构”。你能采用它加载来自相同 bundlers 的插件，为插件提供结构，并处理诸如路由器、依赖关系等问题。该项目可透过附加的软件包支持 RN 和 Vue，但文档和测试绝大多数是针对 React 的。

能访问如下的 GitHub 项目了解更多信息。

https://github.com/frintjs/frint

Mosaic 是一组服务项目，库以及规范定义了其模块之间如何彼此交互，用来支持大型网站的微服务项目式构架。Mosaic 采用了短片（Fragments）的机制，这些短片由单独的服务项目程序提供服务项目，并根据模板定义在运转时女团在一同。

它由一堆软件包组成，这些软件包处理相同的问题，例如路由器、布局、模板存储、甚至展示 UI。需要更多信息，请查阅如下镜像。

https://www.mosaic9.org/

PuzzleJS 是“用作可扩充和快速建站的微后端架构”。你能采用它创建相互对话的网关和店面项目。它的灵感来自 Facebook 的 BigPipe，朝着微后端的方向发展。

PuzzleJs 提供诸如创建网关或店面（彼此分立）的机能，并提供配置文件将它们连接。你能采用它在编译时将 html 模板编译为 javascript 函数。此操作完全分立于请求，因此 PuzzleJ 能采用此机能发送第一个块。它也是 SEO 友好的，在服务项目端展开准备和渲染。而且，当短片所需的 api 出现故障时，PuzzleJs 可保证其它网页短片仍正常组织工作。这里是一个真实的 例子。

https://github.com/puzzle-js/puzzle-js

https://itnext.io/11-micro-frontends-frameworks-you-should-know-b66913b9cd20