微前端乾坤js实践
2026-07-03 02:06:37
微前端乾坤js实践总结
微前端是一种通过多个团队独立发布功能来共同构建现代化Web应用的技术手段，旨在解决单体应用演变成巨石应用后的不可维护问题。乾坤js（qiankun）是基于single-spa封装的微前端框架，提供了开箱即用的API，支持任意技术栈的应用接入，并具备样式隔离、JS沙箱、资源预加载等特性。以下是在React中接入乾坤微前端的实践步骤：
使用Lerna管理多包项目：
安装Lerna：npm i lerna -g
初始化Lerna仓库：git init lerna-qiankun && cd lerna-qiankun，然后执行lerna init
在packages目录下创建主应用和子应用项目，如main-qiankun、one-qiankun等
创建React主应用：
使用create-react-app创建项目：create-react-app main-qiankun --template typescript
进入项目目录并释放webpack配置：cd main-qiankun，然后执行npm eject
安装react-router-dom：npm install react-router-dom
创建路由页面并配置App.tsx
安装qiankun：npm i qiankun -S
在主应用中添加qiankun依赖及启动生命周期
创建React子应用：
同样使用create-react-app创建子应用项目，如one-qiankun
进入项目目录并释放webpack配置，修改端口号以避免冲突
安装react-router-dom并创建带有前缀的路由页面
配置子应用的入口逻辑，包括独立访问和微前端挂载的生命周期函数
修改webpack配置，添加library和libraryTarget以支持UMD格式打包
Nginx配置：
配置主应用和子应用的Nginx服务器，确保正确代理和路由
主应用监听8080端口，子应用监听8081端口，并配置跨域头以支持微前端通信
访问与验证：
访问主应用地址（如localhost:8080），应能看到子应用界面嵌入在主应用中
通过以上步骤，成功实现了React应用接入乾坤微前端框架，达到了技术栈无关、独立开发部署、增量升级和独立运行时的核心价值。后续可进一步探索主子应用间的数据交互与传递。
热门标签
