5分钟上手umi-plugin-qiankunUmiqiankun微前端快速入门实战教程【免费下载链接】umi-plugin-qiankunUmi plugin for qiankun.项目地址: https://gitcode.com/gh_mirrors/umi/umi-plugin-qiankunumi-plugin-qiankunnpm 包名umijs/plugin-qiankun是 Umi 官方为 qiankun 打造的微前端插件帮你用极少配置就把「一个主应用 N 个子应用」的架构搭起来。无需手写复杂的 qiankun 初始化代码装插件、改两行配置主应用和子应用就能互相注册、加载、通讯并支持 JS 沙箱与预加载。本文带你 5 分钟跑通一套完整的 Umi 微前端 Demo。上图演示效果顶部导航由主应用提供点击 app1 / app2 时对应子应用被动态加载进主应用容器——这就是 qiankun 微前端的典型体验。 这个插件能做什么基于 qiankun成熟可靠的微前端方案jsSandbox开启后子应用 JS 互不污染主子应用都用 Umi一份技术栈开发所有应用团队上手零成本兼容多种路由模式主子应用均支持 browser、hash 等 history 模式父子应用通讯props 传值 Hooks 共享数据两种玩法子应用生命周期可自定义bootstrap()、mount()、unmount()随意扩展主子应用本地联调各自umi dev起服务即可联调不用部署插件核心代码分布在 src/master/主应用侧注册子应用、生成路由和 src/slave/子应用侧导出生命周期逻辑非常精简值得通读一遍。 一键安装最快配置方法在主应用和每个子应用中都要安装插件$ npm i umijs/plugin-qiankun -S # 或 yarn add umijs/plugin-qiankun主应用在.umirc.js中加入一行插件配置export default { plugins: [ [umijs/plugin-qiankun, { master: { /* 子应用注册信息见下文 */ } }], ], };子应用配置更简单插件名后不加参数即可export default { base: /app1, // 子应用路由前缀默认取 package.json 的 name plugins: [umijs/plugin-qiankun], };就这两步框架层面的接入已完成 ✅ 主应用如何注册子应用在主应用的master.apps里声明每个子应用的name唯一 id、entry地址和base路由前缀master: { apps: [ { name: app1, entry: //localhost:7001, base: /app1 }, { name: app2, entry: //localhost:7002, base: /app2 }, ], jsSandbox: true, // 开启 JS 沙箱避免全局变量污染 prefetch: true, // 预加载子应用切换更流畅 }常用主应用配置一览配置说明默认值apps子应用列表必填-jsSandbox是否启用 JS 沙箱falseprefetch是否启用预加载truedefer渲染容器异步生成时延迟启动 qiankunfalsefetch拦截子应用静态资源的请求原生fetch 除了「构建期写死」还支持运行时动态注册在主应用src/app.js中export const qiankun fetch(/config).then(...)从后端接口拉取子应用列表实现微前端动态化。参考示例 examples/master/app.js。⚠️ 运行时方式下插件不会自动生成子应用路由需要在pages/下建一个空容器页并配置对应路由否则会 404。 子应用接入三步走设置base与主应用注册时的base保持一致如/app1配置插件plugins: [umijs/plugin-qiankun]可选自定义生命周期在子应用src/app.js导出qiankun对象export const qiankun { bootstrap(props) { console.log(加载之前, props); }, mount(props) { console.log(渲染之前, props); }, unmount(props) { console.log(卸载之后, props); }, };生命周期钩子里能拿到主应用通过props下发的任意数据是通讯的入口。子应用侧生命周期实现可查看 src/slave/lifecycles.ts。 本地联调小技巧建议在子应用用.env固定端口如PORT8081保证主应用entry配置稳定参考 examples/app1/serve.json 的开发服务配置。 父子应用如何通讯插件内置两种方案按需选择方案一基于 props 传递—— 类似 React 组件传参。主应用注册子应用时挂上props子应用在生命周期钩子里接收适合传函数、配置等。方案二基于 Hooks 共享数据—— 适合跨应用共享状态主应用在src/rootExports.js中导出数据与操作函数示例见 examples/master/rootExports.js子应用用import { useRootExports } from umi一行拿到用法参考 examples/app1/pages/index.jsconst rootExports useRootExports(); // 直接读写主应用导出的共享数据⚠️ Hooks 方案需保证主子应用共享同一份 React 实例强制 external React且只能在函数组件中使用。❓ 新手高频避坑指南history 模式保持一致主子应用都用 browser 或都用 hash插件会自动补空路由避免 404模式不一致需自行处理路由base三处要一致主应用注册、子应用.umirc.js的base、子应用 URL 前缀挂载容器 id子应用默认挂载到#root-subapp若自定义了mountElementId注意主、子应用容器 id 不要相同版本要求插件适配 Umi2umi 2.12.0与 React 16如果你用的是 Umi3请改用 Umi 插件库中对应的 qiankun 插件版本不通用 示例代码去哪看仓库内自带一套完整可运行的主子应用 Demo强烈建议 clone 下来直接跑路径说明examples/master/主应用导航布局、动态拉取子应用列表examples/app1/子应用一examples/app2/子应用二examples/app3/子应用三含动态路由参数示例在根目录执行yarn yarn build yarn start即可同时启动主应用和全部子应用打开浏览器就能看到开头的 Demo 效果 小结umi-plugin-qiankun 的价值在于「约定大于配置」——安装插件、写好base和appsqiankun 的沙箱、预加载、生命周期、路由接管全部自动搞定。剩下的精力就该花在业务本身了。【免费下载链接】umi-plugin-qiankunUmi plugin for qiankun.项目地址: https://gitcode.com/gh_mirrors/umi/umi-plugin-qiankun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考