乾坤
乾坤使您和您的团队能够利用微前端构建下一代和企业就绪的 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.
参考资料
https://github.com/cncounter/translation/blob/master/README.md