基于umi+qiankun的微前端

为什么需要微前端

当一个前端项目变得足够大时，无论是开发，维护都会变得越来越困难，而且后期还会涉及到一系列性能，上线回滚（前后端移动端回滚），多团队协作等问题。

微前端解决方案

目前市面上微前端解决方案比较好了就要属qiankun了（qiankun官网)。

umi+qiankun

umi有插件可以直接支持qiankun接入，非常方便和简单，接下来就是基于umi+qiankun的微前端demo

1.基座和子应用都是基于umi，分别命名为main和app1，分别都安装@umijs/plugin-qiankun插件

yarn add @umijs/plugin-qiankun

2.main项目-umirc.ts：

// main/.umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      path: '/',
      component: '@/pages/index',
      routes: [
        {
          path: '/app1',
          microApp: 'app1',
        },
      ],
    }
  ],
  qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'app1', // 唯一 id
          entry: '//localhost:8000', // app1项目的启动地址
        },
      ],
    },
  },
});

3.main项目-pages/index.tsx

// main/pages/index/tsx
import React from 'react';
export default (props: any) => {
  return (
    <div>
      <div>
        <div>main</div>
        <div>{props.children}</div>
      </div>
    </div>
  );
};

4.app1项目-pages/app.ts

import { defineConfig } from 'umi';

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

5.app1项目-pages/app.ts

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

6.分别启动main和app1项目，访问main项目/app1路由即可。

demo地址

相关资料

umi官网