知识库

Appearance

微前端与 Monorepo ​

架构设计 · Qiankun/Micro App · pnpm workspace · 构建脚本 · CI/CD

一、微前端 + Monorepo 架构设计 ​

适用场景：多团队协作的后台管理系统、电商/金融等多子系统项目

Monorepo 技术选型：

类型方案特点
构建型Turborepo / Rush / Nx极致构建性能优化，适合大型项目
轻量型pnpm / Lerna / Yarn渐进式，解决依赖管理和版本管理

微前端技术选型：

框架特点
Qiankun基于 single-spa，主流方案，完善沙箱/通信
Micro App基于 WebComponent，接入成本极低
无界WebComponent + iframe 沙箱
EMPWebpack5 Module Federation，共享粒度自由

pnpm monorepo + Micro App 架构 ​

├── packages/
|   ├── base/          # 基座应用（Vite + Vue3）
|   ├── child-app1/    # 子应用（vue-cli + Vue2）
|   ├── child-app2/    # 子应用
|   └── share/         # 共享模块（request/类型定义/工具函数）
├── config.json        # 统一应用配置（name/port/auth）
├── pnpm-workspace.yaml

核心实践 ​

  1. 自动生成路由：基座读取 config.json，遍历子应用配置自动生成路由 + <micro-app> 页面组件
  2. 应用间通信：
    • 基座 → 子应用：microApp.setData(name, data)
    • 子应用 → 基座：window.microApp.dispatch(data)
    • 全局通信：microApp.getGlobalData() / addGlobalDataListener()
    • 本地存储：同域下共享 localStorage（注意加密敏感数据）
  3. 跨应用跳转：getActiveApps() 判断子应用是否已运行 → 已运行则 setData 通知跳转，否则 router.push
  4. 共享模块：子应用通过 "@package/share": "workspace:*" 引用，rollup 打包为 ESM
  5. 样式隔离：Micro App 自带 scopeCSS，但建议关闭后使用原子化 CSS（Tailwind/UnoCSS）避免基座样式影响

Nginx 部署配置 ​

nginx
# 子应用统一匹配（新增子应用无需改配置）
location ^~ /child {
  root /usr/share/nginx/html;
  add_header Access-Control-Allow-Origin *;
  try_files $uri $uri/ index.html;
}

二、pnpm workspace 依赖管理 ​

bash
pnpm add typescript -D -w           # 全局安装（-w 表示 workspace-root）
pnpm add typescript -D --filter pkg-a  # 局部安装到指定包
pnpm add pkg-a -D --workspace --filter pkg-b  # 包之间互相引用
pnpm -r --filter=./packages/* run build  # 批量构建所有子包

三、npm 包发布流程（bumpp + GitHub Actions） ​

yaml
# .github/workflows/release.yml
on:
  push:
    tags: ['v*']
jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
      - run: pnpm i
      - run: pnpm run build
      - run: pnpm publish -r --access public --no-git-checks
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
      - run: npx changelogithub  # 自动生成 CHANGELOG

四、Monorepo 构建脚本优化 ​

问题：多应用时 npm script 膨胀，新增应用需手动维护

方案：基于 config.json 自动生成 dev/build 脚本

  • dev.js：检测端口占用 → inquirer 选择子应用 → execa 启动
  • build.js：inquirer 多选 → Promise.all 并行打包
  • 依赖：inquirer（交互）、execa（子进程）、detect-port（端口检测）

相关 ​