01. 开发一个子应用

子应用分为「brother 级」和「children 级」，详见 children 级子应用与 brother 级子应用；

下面的示例基于新建一个 children 级子应用编写。

新建并配置子应用

在与基座应用平级的目录下新建一个项目目录：

Ming > $ mkdir example && cd example 

在项目目录下新建一个 umi3.x 的应用：

Ming/example > $ yarn create @umijs/umi-app

安装依赖，并额外安装 @umijs/plugin-qiankun：

Ming/example > $ yarn install
Ming/example > $ yarn add @umijs/plugin-qiankun

配置 .umirc.ts 启用 qiankun：

import { defineConfig } from 'umi';

export default defineConfig({
  routes: [
    { path: '/index', component: '@/pages/index' },
    { path: '/other', component: '@/pages/other' },
  ],
+ base: '/example',
+ qiankun: {
+   slave: {}
+ }
});

✅ 按 qiankun 规范，还应该为子应用的 package.json 配置一个 name

指定 example 子应用的启动端口，修改 .env 或 .env.local：

PORT=9000

子应用此时可以独立启动、单独调试：

Ming/example > yarn start

子应用可独立运行在 http://localhost:9000/example/index

配置基座应用

Ming 的基座应用为 Ming/foundation，可以随意指定基座应用；

基座应用的基本配置见 @umijs/plugin-qiankun.

从 Ming 1.1.0 版本开始，将路由和应用配置集中到了 foundation/config/config.[env].ts，方便配置。

配置 foundation/config/config.dev.ts，新增 example 子应用：

const subApps: MingRoute[] = [
  ...
+ {
+   name: 'example',
+   microApp: 'example',
+   entry: 'http://localhost:9000',
+   path: '/example',
+   title: '示例',
+   wrappers: ['@/wrappers/children'],
+   privilegeId: '示例子项目',
+   routes: [
+    { path: '/example/index', title: '页面1', privilegeId: '示例子项目的页面1' },
+    { path: '/example/other', title: '页面2', privilegeId: '示例子项目的页面2' },
+  ],
+ },
  ...
]

注意：

1. 按规范，请保证 name 字段在 MingRoute[] 数组中唯一不重复。microApp 字段对应不同的子应用名称（允许重复）

2. entry 字段应为子应用入口的 index.html 文件，开发模式下可以直接配置为子应用的 ip:[port]

3. path 字段指定了 example 子应用在微前端应用的路由前缀，与此对应的，需要将 routes[] 中的 path 添加此前缀

4. wrappers 指定了此应用外部包裹的 React 组件，可以指定 1 个或多个，至少指定一个：

   • 数组包含 @/wrappers/children 代表此应用为 children 级子应用
   • 数组包含 @/wrappers/brother 代表此应用为 brother 级子应用

5. title 用于一个 children 级子应用指定它自己在侧边栏的标题。brother 级子应用可不指定此字段

6. privilegeId 为权限标识，全局页面权限控制的设计思路详见 DOM 级权限控制

启动基座应用，查看子应用

启动基座应用

Ming/foundation > yarn start

基座应用默认启动在 http://localhost:8000

查看子应用

• 子应用页面 1 路径：http://localhost:8000/example/index
• 子应用页面 2 路径：http://localhost:8000/example/other

在子应用之间切换时，基座应用会自动显示 loading 动画。