monorepo

可以使用 pnpm 的 monorepo 架构来共享公共组件、方法和第三方依赖，且效果非常好！
相比传统的 npm 和 yarn，pnpm 在 monorepo 场景下提供了更好的包管理性能和依赖去重，特别适合微前端架构。

📌 方案概述

pnpm monorepo 主要依赖 workspace 机制，把多个子应用和公共包统一管理在一个单一的仓库中。
主应用和子应用可以直接共享公共组件库、工具方法、第三方包，避免重复安装和版本冲突。

📌 如何实现？

🔹 1. 创建 pnpm monorepo 项目

1
2
mkdir microfrontend-monorepo && cd microfrontend-monorepo
pnpm init

在 package.json 里启用 workspaces：

1
2
3
4
5
{
  "name": "microfrontend-monorepo",
  "private": true,
  "workspaces": ["packages/*", "apps/*"]
}

● packages/ 👉 存放共享的公共组件库、工具库
● apps/ 👉 存放主应用和子应用

🔹 2. 添加共享的 packages

1
mkdir -p packages/shared-ui packages/shared-utils

📌 创建 shared-ui（共享组件库）

1
2
cd packages/shared-ui
pnpm init

安装 React 组件依赖（如果是 Vue 则用 vue）

1
pnpm add react react-dom

创建 index.tsx

1
2
3
4
5
6
// packages/shared-ui/src/Button.tsx
import React from "react";

export const Button = ({ text }: { text: string }) => {
  return <button style={{ padding: "10px 20px", background: "blue", color: "white" }}>{text}</button>;
};

导出组件

1
2
// packages/shared-ui/index.ts
export * from "./src/Button";

添加 package.json 配置

1
2
3
4
5
6
7
8
9
{
  "name": "@micro/shared-ui",
  "version": "1.0.0",
  "main": "index.ts",
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

📌 创建 shared-utils（共享工具库）

1
2
cd ../shared-utils
pnpm init

添加工具函数

1
2
// packages/shared-utils/index.ts
export const formatDate = (date: string) => new Date(date).toLocaleString();

配置 package.json

1
2
3
4
5
{
  "name": "@micro/shared-utils",
  "version": "1.0.0",
  "main": "index.ts"
}

🔹 3. 创建 apps 目录（主应用和子应用）

1
mkdir -p apps/main-app apps/sub-app

📌 配置主应用

1
2
3
cd apps/main-app
pnpm init
pnpm add react react-dom @micro/shared-ui @micro/shared-utils

在 App.tsx 里使用共享组件和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from "react";
import { Button } from "@micro/shared-ui";
import { formatDate } from "@micro/shared-utils";

const App = () => {
  return (
    <div>
      <h1>主应用</h1>
      <Button text="点击我" />
      <p>当前时间：{formatDate(Date.now().toString())}</p>
    </div>
  );
};

export default App;

📌 配置子应用

1
2
3
cd ../sub-app
pnpm init
pnpm add react react-dom @micro/shared-ui @micro/shared-utils

子应用 App.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react";
import { Button } from "@micro/shared-ui";

const SubApp = () => {
  return (
    <div>
      <h2>子应用</h2>
      <Button text="我是子应用的按钮" />
    </div>
  );
};

export default SubApp;

🔹 4. 在 pnpm monorepo 里安装依赖

回到项目根目录，运行：

1
pnpm install

pnpm 会自动去重依赖，所有 packages 和 apps 共享相同的 node_modules，提升构建速度。

📌 启动主应用和子应用

方式 1：独立运行（适合非微前端模式）

1
2
cd apps/main-app && pnpm start
cd apps/sub-app && pnpm start

这样主应用和子应用可以各自独立运行。

方式 2：微前端整合（适合 qiankun、Module Federation）

使用 qiankun 微前端框架
主应用（main-app）

1
2
3
4
5
6
7
8
9
10
11
12
import { registerMicroApps, start } from "qiankun";

registerMicroApps([
  {
    name: "sub-app",
    entry: "//localhost:3001",
    container: "#subapp-container",
    activeRule: "/subapp",
  },
]);

start();

子应用（sub-app）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { render } from "react-dom";
import SubApp from "./App";

export async function bootstrap() {
  console.log("子应用 bootstrap");
}

export async function mount(props) {
  console.log("子应用 mount", props);
  render(<SubApp />, document.getElementById("root"));
}

export async function unmount() {
  console.log("子应用 unmount");
}

📌 优势分析

✅ 共享组件库 & 工具库：所有子应用共用 @micro/shared-ui 和 @micro/shared-utils，代码复用率高。
✅ 自动依赖去重：pnpm 采用硬链接，不会重复安装 React、Ant Design 等第三方包。
✅ 独立开发 & 统一管理：子应用可以独立开发，但也能享受 monorepo 的依赖管理。
✅ 微前端兼容性强：可以配合 qiankun、Module Federation、Web Components 等方式实现微前端。

📌 适合的场景

● 多子应用共享组件库、工具库
● 每个子应用可以独立运行，但也能合并成微前端
● 减少重复安装 React、Vue、Ant Design 等依赖
● 适用于 Vite、Webpack、Rollup 等现代构建工具

📌 总结
如果你的微前端架构涉及多个 React/Vue 子应用，且希望共享公共组件、工具方法、第三方包，pnpm monorepo 是最佳选择！
🔹 小规模团队：直接用 pnpm workspaces 管理依赖和共享组件。
🔹 大规模团队：结合 qiankun 或 Module Federation，实现动态加载、按需共享组件。

如果你们的项目需求更复杂，比如要动态加载不同版本的组件库，也可以进一步结合Webpack Module Federation 进行优化。