javascript

umi 微前端方案

umi 的微前端方案是 qiankun。本文通过举例介绍 umi 中怎么用 qiankun 搭建主应用和子应用。

创建主应用

1.新建主工程

1
2
3
mkdir main && cd main
yarn create @umijs/umi-app
yarn

2.安装 qiankun 插件

1
yarn add @umijs/plugin-qiankun -D

创建子应用

回到主工程同级目录

1.新建子工程 micro-app-a

1
2
3
mkdir micro-app-a && cd micro-app-a
yarn create @umijs/umi-app
yarn

2.安装 qiankun 插件

1
yarn add @umijs/plugin-qiankun -D

3.配置

.umirc.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// .umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  history: {
    type: 'browser',  // 配置 history 为 'browser' 类型
  },
  base: '/micro-app-a/',  // 微应用将部署在名为 micro-app-a 的子目录
  publicPath: '/micro-app-a/',  // 微应用将部署在名为 micro-app-a 的子目录
  // qiankun 配置，slave 说明这是子应用
  qiankun: {
    slave: {}
  },
});

package.json

1
2
3
...
"start": "PORT=8001 umi dev",	// 指定子应用启动端口
...

配置主应用

回到主应用

1.配置会用到的子应用: 在主应用目录下新建 config/microApps.js 文件，里面添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
const apps = [
  {
    name: 'micro-app-a',    // 子应用名称
    entry:
      process.env.NODE_ENV === 'development'
        ? '//localhost:8001/micro-app-a'
        : '/micro-app-a',   // 子应用入口
    codePath: 'micro-app-a',    // 子应用工程目录名称，打包脚本会用到这参数
  },
];

module.exports = apps;

2..umirc.ts配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { defineConfig } from 'umi';

const apps = require('./config/microApps');

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      path: '/',
      component: '@/pages/index',
    },
    { path: '/micro-app-a', microApp: 'micro-app-a' }, // 子应用路由
  ],
  history: {
    type: 'browser',
  },
  qiankun: {
    master: {
      apps,
    },
  },
});

3.在 pages 下创建 micro-app-a 页面，micro-app-a/index.tsx 内容如下

1
2
3
4
5
6
7
import React from 'react';
import { MicroApp } from 'umi';

export default () => {
  // name 是 config/microApps.js 里配置的
  return <MicroApp name="micro-app-a" />;
};

4.主应用跳转子应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import styles from './index.less';
import { history } from 'umi';

export default () => {
  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <button
        onClick={() => {
          history.push('/micro-app-a');
        }}
      >
        push micro-app-a
      </button>
    </div>
  );
};

启动

此时分别运行 yarn start 启动主应用和子应用就可以从主应用跳转子应用

打包

这里打包方案是将子应用打包到主应用目录下一起部署，为了方便打包，在主工程下写了个打包脚本 scripts/build.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const child_process = require('child_process');
const process = require('process');

const pwd = process.cwd();

// 先打包主应用
child_process.execSync('yarn build', { stdio: 'inherit' });

const apps = require('../config/microApps');

for (let i = 0; i < apps.length; i += 1) {
  const app = apps[i];
  // 子应用项目目录
  const codePath = app.codePath || app.name;
  // 打包子应用，然后复制到主应用打包目录下
  child_process.execSync(
    `cd ../${codePath} && yarn build && cp -rf dist ${pwd}/dist/${app.entry}`,
    {
      stdio: 'inherit',
    },
  );
}

打包完成后，将主工程下 dist 文件夹拿去部署下就好

项目地址