【源码】基于UmiJS框架的qiankun微前端插件

项目简介

本项目是一个基于UmiJS框架的qiankun微前端插件，可助力开发者实现微前端架构。借助该插件，主应用能够管理多个子应用的加载、卸载与通信，让多个应用在统一路由体系下协同工作。子应用也能轻松嵌入主应用，达成独立开发、独立部署、共同运行的效果。

项目的主要特性和功能

主要特性

• 基于qiankun微前端框架，支持主应用和子应用间的解耦和独立部署。
• 支持UmiJS框架，主应用和子应用均用UmiJS开发，便于统一开发与维护。
• 支持browser、hash等多种历史模式。
• 提供基于props的数据传递和基于Hooks的数据共享机制实现父子应用通讯。
• 支持运行时动态配置子应用信息。

功能介绍

主应用功能

• 在主应用配置文件中配置插件，开启微前端支持。
• 配置子应用的名称、入口、路由前缀等信息。
• 实现主应用和子应用之间的数据传递和通信。

子应用功能

• 子应用可独立进行开发、测试和部署，不影响其他应用。
• 能通过配置方便地嵌入到主应用中。
• 实现子应用间的数据共享和通信。

安装使用步骤

安装步骤

1. 在主应用中使用npm或yarn安装@umijs/plugin-qiankun插件： bash npm install @umijs/plugin-qiankun -S 或者 bash yarn add @umijs/plugin-qiankun
2. 在主应用的配置文件中配置插件，并开启微前端支持： js export default { plugins: [ [ '@umijs/plugin-qiankun', { master: { apps: [ { name: 'app1', entry: '//localhost:7001', base: '/app1', history: 'browser', }, { name: 'app2', entry: { scripts: [], styles: [], }, base: '/app2', }, ], jsSandbox: true, prefetch: true, }, }, ], ], };
3. 使用UmiJS框架启动主应用： bash yarn start
4. 将子应用独立部署到服务器上。

使用示例

主应用使用示例

1. 在配置文件中配置插件和子应用信息。
2. 在app.js中启动qiankun，并配置子应用信息。
3. 实现主应用和子应用间的通讯。

子应用使用示例

1. 在配置文件中配置插件。
2. 在app.js中导出qiankun对象，配置生命周期函数。
3. 实现子应用的独立开发和部署。

API文档

MasterOptions

• apps：子应用配置。
• jsSandbox：是否启用js沙箱。
• prefetch：是否启用prefetch特性。
• defer：是否异步渲染。
• fetch：用于拦截htmlEntry静态资源fetch时的请求。

SlaveOptions

• keepOriginalRoutes：子应用通过设置此配置，在编译时会按照keepOriginalRoutes的值添加一份route的快照。

相关链接

• UmiJS官方文档

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】