建议阅读 Umi 微前端，了解 微前端 的基本使用

介绍

  • Lerna 是一个快速、领先的构建系统，用于管理和发布来自同一源码仓库的多个 JavaScript/TypeScript 软件包

  • Umi 企业级前端开发框架，它提供了一套完整的 Web 应用开发解决方案，包括路由、状态管理、数据请求、页面布局、主题定制等功能

项目地址

实践

包版本

  • node: 18.20.7

  • npm: 10.8.2

  • lerna: 8.1.8

  • umi: 4.4.0

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
├── 根目录
  |── packages                  # 项目目录, 名称要跟 package.json 中 workspaces 以及 lerna.json 中 packages 一致
    |── app                     # 主应用app
      |── src
        |── .umi                # 动态生成的文件夹
      |── .env                  # 配置启动端口和禁用 babel 的缓存
      |── .umirc.ts             # umi 配置文件
    |── app1                    # 子应用app1
      |── src
        |── .umi                # 动态生成的文件夹
      |── .env                  # 配置启动端口和禁用 babel 的缓存
      |── .umirc.ts             # umi 配置文件
    |── app2                    # 子应用app2
      |── src
        |── .umi                # 动态生成的文件夹
      |── .env                  # 配置启动端口和禁用 babel 的缓存
      |──  .umirc.ts            # umi 配置文件
  |── lerna.json                # lerna 配置文件
  |── package.json              # 全局配置文件

搭建 monorepo 项目 (可选)

  • 通过 npm install lerna -g 全局安装 lerna

  • 命令行执行 npx lerna init 初始化项目

  • 配置 lerna.json 文件如下

    1
    2
    3
    4
    5
    {
      "npmClient": "npm", // 使用 npm
      "packages": ["packages/*"], // 指定包目录
      ... // 其他配置
    }

  • 配置 package.json 文件如下

    1
    2
    3
    4
    {
      "workspaces": ["packages/*"],
      ... // 其他配置
    }

创建主/子应用

  • 依次执行下面命令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 从根目录进入 packages 目录
    cd ./packages

    # 创建主应用 app
    npx create-umi@latest

    # What's the target folder name?
    app

    # Pick Umi App Template
    Ant Design Pro

    # Pick Npm Client
    npm

    # Pick Npm Registry (这一步会在 根目录 下创建 `.npmrc` 文件)
    npm

  • 在 packages/app/package.json 中配置 name 一定要配置，否则 npm workspaces 找不到项目

    1
    2
    3
    4
    {
      "name": "app",
      ... // 其他配置
    }

  • 在 packages/app 下新建 .env 文件，并配置 启动端口和禁用 babel 的缓存

    1
    2
    PORT=8000
    BABEL_CACHE=none

  • 依次执行下面命令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 从根目录进入 packages 目录
    cd ./packages

    # 创建子应用 app1
    npx create-umi@latest

    # What's the target folder name?
    app1

    # Pick Umi App Template
    Simple App

    # Pick Npm Client
    npm

    # Pick Npm Registry (这一步会在 根目录 下创建 `.npmrc` 文件, 不需要可以删除)
    npm

  • 在 packages/app1/package.json 中配置 name 一定要配置，否则 npm workspaces 找不到项目

    1
    2
    3
    4
    {
      "name": "app1",
      ... // 其他配置
    }

  • 在 packages/app1 下新建 .env 文件，并配置 启动端口和禁用 babel 的缓存

    1
    2
    PORT=8001
    BABEL_CACHE=none

  • 依次执行下面命令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 从根目录进入 packages 目录
    cd ./packages

    # 创建子应用 app2
    npx create-umi@latest

    # What's the target folder name?
    app2

    # Pick Umi App Template
    Simple App

    # Pick Npm Client
    npm

    # Pick Npm Registry (这一步会在 根目录 下创建 `.npmrc` 文件, 不需要可以删除)
    npm

  • 在 packages/app2/package.json 中配置 name 一定要配置，否则 npm workspaces 找不到项目

    1
    2
    3
    4
    {
      "name": "app2",
      ... // 其他配置
    }

  • 在 packages/app2 下新建 .env 文件，并配置 启动端口和禁用 babel 的缓存

    1
    2
    PORT=8002
    BABEL_CACHE=none

启动项目

在根目录下执行 npm install 安装依赖

  • 方式一：进入各个应用目录，分别执行 npm run dev

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # 进入 packages/app 目录
    cd ./packages/app
    # 启动主应用
    npm run dev

    # 进入 packages/app1 目录
    cd ./packages/app1
    # 启动子应用
    npm run dev

    # 进入 packages/app2 目录
    cd ./packages/app2
    # 启动子应用
    npm run dev

  • 方式二：进入根目录，执行 npm run dev -w=xxx，-w 就是 --workspace，xxx 对应各个应用 package.json 的 name，详见：npm workspace

    1
    2
    3
    4
    5
    6
    7
    8
    # 根目录下启动主应用
    npm run dev -w=app

    # 根目录下启动子应用
    npm run dev -w=app1

    # 根目录下启动子应用
    npm run dev -w=app2

链接主/子应用

在主应用 packages/app/.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
26
export default {
  ... // 其他配置
  routes: [
    { path: '/', redirect: '/home' },
    { name: '首页', path: '/home', component: './Home' },
    { name: '权限演示', path: '/access', component: './Access' },
    { name: ' CRUD 示例', path: '/table', component: './Table' },
    // 新增微应用示例
    { name: 'App1', path: '/app1/*', microApp: 'app1' },
    { name: 'App2', path: '/app2/*', microApp: 'app2' },
  ],
  qiankun: {
    master: {
      apps: [
        {
          name: 'app1', // 与上面 routes 中 microApp 对应
          entry: '//localhost:8001', // packages/app1/.env 文件中的 PORT
        },
        {
          name: 'app2', // 与上面 routes 中 microApp 对应
          entry: '//localhost:8002', // packages/app2/.env 文件中的 PORT
        },
      ],
    },
  },
};

  • 安装 qiankun 插件

    1
    2
    # 根目录下执行
    npm i @umijs/plugins -D -w=app1 -w=app2

  • 在子应用 packages/app1/.umirc.ts 与 packages/app2/.umirc.ts 文件中引入 qiankun 插件

    1
    2
    3
    4
    5
    6
    7
    export default {
      ... // 其他配置
      plugins: ['@umijs/plugins/dist/qiankun'],
      qiankun: {
        slave: {},
      },
    };

更多微前端配置

Umi 项目原理？🤔

  1. 通过 create-umi@latest 创建项目，会生成一个 .umirc.ts 配置文件

  2. 当项目启动时，通过 Webpack插件 找到 .umirc.ts 和 src/app.ts 文件，并生成 src/.umi/* 文件夹

  3. 这个插件应该在 @umi 某个包里面，具体干了什么事情？猜测

    • 根据用户配置动态生成 根组件，就是常见的 createRoot(document.getElementById('root')).render(<App />)

    • 根据用户配置动态加载插件，减小打包体积

    • 减少耦合，与业务无关的内容提取出去

参考文章：【鸣谢】

Umi 微前端