乾坤(qiankun)是一种基于single-spa架构的微前端解决方案,由蚂蚁集团倾力打造,旨在将多个独立的前端应用无缝整合为一个完整的大型系统。qiankun为开发者提供了一流的集成体验,不论你的子应用是基于Vue、React、Angular还是其他任何框架,都能通过qiankun轻松整合。其核心特性如下:
一、技术栈自由组合
在qiankun的架构下,主应用和子应用可以选择不同的技术栈,实现渐进式迁移和混合开发,让技术多样性不再是整合的障碍。
二、沙箱隔离技术
为了确保各个应用间的环境互不干扰,qiankun提供了沙箱隔离机制:
JS沙箱:通过SnapshotSandbox(快照沙箱)、LegacySandbox(单应用代理沙箱)和ProxySandbox(多应用代理沙箱)实现全局变量隔离,保证子应用的安全运行。
CSS沙箱:自动添加命名空间或使用Shadow DOM技术,有效避免样式冲突,让子应用的样式更加可控。
三、强大的通信机制
qiankun不仅支持通过props传递数据,还提供了initGlobalState来管理全局状态,同时支持自定义事件通信,让各个应用间的交互更加便捷。
使用乾坤,步骤简明扼要:
1. 主应用配置
安装qiankun后,注册子应用并启动。示例代码如下:
```javascript
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue3-app',
entry: '//localhost:8081',
container: 'subapp-container',
activeRule: '/vue3',
}
]);
start;
```
2. 子应用适配
子应用需要适配乾坤的加载机制,暴露如bootstrap、mount等生命周期钩子,并正确配置publicPath以确保资源加载无误。
乾坤的应用场景广泛,尤其适用于:
大型后台系统的模块化开发。
旧系统的渐进式重构。
在使用过程中也需要注意一些事项:
子应用需要支持跨域(开发环境)。
在多实例模式下,Proxy沙箱不支持IE浏览器。
乾坤为开发者提供了一种高效、灵活的前端整合方案,无论是新项目的开发还是旧项目的重构,都能为你带来极大的便利。想要深入了解乾坤的更多细节或寻求帮助,随时向我们提出你的需求。让我们一起打造更加出色的前端项目!