Umi-plugin-qiankun 使用教程

1. 项目介绍

Umi-plugin-qiankun 是一个基于 Umi 框架的微前端解决方案，它利用 qiankun 作为核心，提供了主应用与子应用之间的通信、路由同步、沙箱隔离等功能，使得微前端架构的开发变得更加简便和高效。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，在项目中安装 umi-plugin-qiankun：

npm i @umijs/plugin-qiankun -S
# 或者
yarn add @umijs/plugin-qiankun

主应用配置

在主应用中，你需要在 config/config.js 或 config/config.ts 中配置插件：

export default {
  plugins: [
    [
      '@umijs/plugin-qiankun',
      {
        master: {
          // 注册子应用信息
          apps: [
            {
              name: 'app1', // 唯一 id
              entry: '//localhost:7001', // 子应用 html entry
              base: '/app1', // 子应用的路由前缀
              history: 'browser', // 子应用的 history 配置
            },
            // 可以注册多个子应用
          ],
          jsSandbox: true, // 是否启用 js 沙箱
          prefetch: true, // 是否启用 prefetch 特性
        },
      },
    ],
  ],
};

子应用配置

在子应用中，同样需要在 config/config.js 或 config/config.ts 中配置插件：

export default {
  base: `/app2`, // 子应用的 base，默认为 package.json 中的 name 字段
  plugins: [
    '@umijs/plugin-qiankun',
  ],
};

并在 src/app.js 中暴露生命周期钩子：

export const qiankun = {
  async bootstrap(props) {
    console.log('app2 bootstrap', props);
  },
  async mount(props) {
    console.log('app2 mount', props);
  },
  async unmount(props) {
    console.log('app2 unmount', props);
  },
};

启动项目

完成配置后，分别启动主应用和子应用：

# 启动主应用
yarn start

# 启动子应用
yarn start

确保子应用和主应用在不同的端口上运行。

3. 应用案例和最佳实践

• 案例：一个典型的电商网站可能包含商品展示、订单管理、用户管理等模块，这些模块可以作为独立的子应用开发，然后注册到主应用中。
• 最佳实践：确保主应用和所有子应用使用相同的路由模式（如 browser 或 hash），以避免路由不匹配导致的404问题。

4. 典型生态项目

Umi-plugin-qiankun 作为 Umi 框架的插件，与 Umi 框架的其他插件和工具链配合使用，可以构建出功能丰富、结构清晰的大型前端项目。例如，结合 Umi 的 dva 插件进行状态管理，使用 Umi 的路由守卫进行权限控制等。