Umi-plugin-qiankun 使用教程
1. 项目介绍
Umi-plugin-qiankun 是一个基于 Umi 框架的微前端解决方案,它利用 qiankun 作为核心,提供了主应用与子应用之间的通信、路由同步、沙箱隔离等功能,使得微前端架构的开发变得更加简便和高效。
2. 项目快速启动
安装依赖
首先,确保你已经安装了 Node.js 和 npm。然后,在项目中安装 umi-plugin-qiankun:
npm i @umijs/plugin-qiankun -S
# 或者
yarn add @umijs/plugin-qiankun
主应用配置
在主应用中,你需要在 config/config.js
或 config/config.ts
中配置插件:
export default {
plugins: [
[
'@umijs/plugin-qiankun',
{
master: {
// 注册子应用信息
apps: [
{
name: 'app1', // 唯一 id
entry: '//localhost:7001', // 子应用 html entry
base: '/app1', // 子应用的路由前缀
history: 'browser', // 子应用的 history 配置
},
// 可以注册多个子应用
],
jsSandbox: true, // 是否启用 js 沙箱
prefetch: true, // 是否启用 prefetch 特性
},
},
],
],
};
子应用配置
在子应用中,同样需要在 config/config.js
或 config/config.ts
中配置插件:
export default {
base: `/app2`, // 子应用的 base,默认为 package.json 中的 name 字段
plugins: [
'@umijs/plugin-qiankun',
],
};
并在 src/app.js
中暴露生命周期钩子:
export const qiankun = {
async bootstrap(props) {
console.log('app2 bootstrap', props);
},
async mount(props) {
console.log('app2 mount', props);
},
async unmount(props) {
console.log('app2 unmount', props);
},
};
启动项目
完成配置后,分别启动主应用和子应用:
# 启动主应用
yarn start
# 启动子应用
yarn start
确保子应用和主应用在不同的端口上运行。
3. 应用案例和最佳实践
- 案例:一个典型的电商网站可能包含商品展示、订单管理、用户管理等模块,这些模块可以作为独立的子应用开发,然后注册到主应用中。
- 最佳实践:确保主应用和所有子应用使用相同的路由模式(如 browser 或 hash),以避免路由不匹配导致的404问题。
4. 典型生态项目
Umi-plugin-qiankun 作为 Umi 框架的插件,与 Umi 框架的其他插件和工具链配合使用,可以构建出功能丰富、结构清晰的大型前端项目。例如,结合 Umi 的 dva 插件进行状态管理,使用 Umi 的路由守卫进行权限控制等。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考