umijs qiankun 初体验

背景：

一些大的项目，需要一个前端中台，承载各项目组开发的应用，本篇文章是在工作实践后所写，网上找了好多例子也少，记录下来后面供自己预览

qiankun 是一个基于 single-spa 的微前端实现库
umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

搭建主应用

yarn create @umijs/umi-app 安装umi脚手架

安装qiankun

yarn add qiankun

安装@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

在主应用中注册子应用

在.umirc.ts 文件中 仿照以下代码进行添加
例如：

子应用的工程名称是：app-1
子应用的端口是：8001

这里端口到时候要规定好

{
  ...
  qiankun: {
    master: {
      apps: [
        {
          name: 'app-1',
          entry: '//localhost:8001',
        },
      ],
    },
  },
}

在主应用中装载子应用（路由）

指向子应用的路由。
在 config/config.ts 文件中，仿在 routes 属性下进行添加：

{
  name: 'app-1',
  icon: 'smile',
  path: '/app-1',
  microApp: 'app-1',
},

示例：这是我的.umirc.ts 文件配置 很简单

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    {
      name: 'app-1',
      icon: 'smile',
      path: '/app-1',
      microApp: 'app-1',
    },
  ],
  fastRefresh: {},
  qiankun: {
    master: {
      apps: [
        {
          name: 'app-1',
          entry: '//localhost:8001',
        },
      ],
    },
  },
});

好了，这个时候我们的主应用就意见搭建好了。

搭建子应用

yarn create @umijs/umi-app 安装umi脚手架

安装qiankun

yarn add @umijs/plugin-qiankun -D

为了获得更好地本地开发及调试体验，我们建议您提前在子应用中指定应用启动的具体端口号，如通过.env指定

PORT=8081

注册刚安装的插件

在 .umirc.ts 文件中添加以下代码：

qiankun: {
  slave: {}
}

添加后如下：

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  
  // 使用qiankun插件
  qiankun: {
    slave: {}
  },
});

修改工程名称

打开 package.json 文件，在第一行添加属性 name 及相应属性值。

如：

image.png

导出相应生命周期钩子

在 src/app.ts 中添加以下代码，app.ts 如果不存在则需要自行创建

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

到了这里就可以了

这是我的文件

image.png

效果：

主应用

image.png

在主应用中通过路由访问子应用

image.png

子应用：

image.png

如果我们希望把子应用在父应用中当组件使用

可以这样：

import styles from './index.less';
import { MicroApp } from 'umi';

export default function IndexPage() {
  return (
    

      {/* 这里的name就是你的子路由名称 引用MicroApp */}
       

      
我是主应用
    
  );
}

效果

image.png

如上面就当组件显示了

好了，到了这里，简单的qiankun使用就可以了

借鉴了这两位的
https://www.jianshu.com/p/d0f87e1dcacf
https://www.yuque.com/blueju/blog/huuie8