乾坤

乾坤使您和您的团队能够利用微前端构建下一代和企业就绪的 Web 应用程序。

它的灵感来自并基于 https://github.com/single-spa/single-spa。

动机

关于“微前端”概念的快速回顾：

与使用不同 JavaScript 框架的多个团队构建现代 Web 应用程序的技术、策略和方法。 — 微前端

乾坤是在分布式团队开发web应用完全混乱的时候，在我们集团内部诞生的。我们遇到了微前端要解决的每个问题，所以很自然地，它成为了我们解决方案的一部分。

这条路从来都不是一帆风顺的，我们踏上了可能遇到的每一个挑战。

仅举几个：

  • 微应用以什么形式发布静态资源？

  • 框架如何集成各个微应用？

  • 如何确保子应用相互隔离（开发独立和部署独立）和运行时沙盒化？

  • 性能问题？公共依赖呢？

  • 名单很长……

在解决了微前端的这些常见问题和大量的打磨和测试之后，我们提取了我们解决方案的最小可行框架，并将其命名为qiankun，因为它可以包含和服务任何东西。不久之后，它成为了我们在生产中的数百个 Web 应用程序的基石，我们决定将其开源，以减轻您的痛苦。

TLDR：乾坤可能是你见过的最完整的微前端解决方案🧐。

特征

乾坤继承了单人SPA的诸多好处：

📦 微应用独立部署

🛴 懒加载

📱 技术不可知

除此之外，它还提供：

💃优雅的API

💪 HTML 入口访问模式

🛡 风格隔离

🧳 JS 沙盒

⚡ 预取资源

🔌 Umi 插件集成

安装

$ yarn add qiankun  # or npm i qiankun -S

文档

你可以在网站上找到乾坤文档

查看入门页面以获取快速概览。

例子

在示例文件夹中，有一个示例 Shell 应用程序和多个已安装的 Micro FE 应用程序。 要运行它，首先克隆 qiankun：

$ git clone https://github.com/umijs/qiankun.git
$ cd qiankun

现在安装并运行示例：

$ yarn install
$ yarn examples:install
$ yarn examples:start

Visit http://localhost:7099.

view

参考资料

https://github.com/cncounter/translation/blob/master/README.md