可以使用 pnpm 的 monorepo 架构来共享公共组件、方法和第三方依赖，且效果非常好！
相比传统的 npm 和 yarn，pnpm 在 monorepo 场景下提供了更好的包管理性能和依赖去重，特别适合微前端架构。
一、方案概述
pnpm monorepo 主要依赖 workspace 机制，把多个子应用和公共包统一管理在一个单一的仓库中。
主应用和子应用可以直接共享公共组件库、工具方法、第三方包，避免重复安装和版本冲突。
二、如何实现？
🔹 1. 创建 pnpm monorepo 项目
mkdir microfrontend-monorepo && cd microfrontend-monorepo
pnpm init在 package.json 里启用 workspaces：
{
"name": "microfrontend-monorepo",
"private": true,
"workspaces": ["packages/*", "apps/*"]
}packages/👉 存放共享的公共组件库、工具库apps/👉 存放主应用和子应用
🔹 2. 添加共享的 packages
mkdir -p packages/shared-ui packages/shared-utils📌 创建 shared-ui（共享组件库）
cd packages/shared-ui
pnpm init安装 React 组件依赖（如果是 Vue 则用 vue）
pnpm add react react-dom创建 index.tsx
// 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>;
};导出组件
// packages/shared-ui/index.ts
export * from "./src/Button";添加 package.json 配置
{
"name": "@micro/shared-ui",
"version": "1.0.0",
"main": "index.ts",
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}📌 创建 shared-utils（共享工具库）
cd ../shared-utils
pnpm init添加工具函数
// packages/shared-utils/index.ts
export const formatDate = (date: string) => new Date(date).toLocaleString();配置 package.json
{
"name": "@micro/shared-utils",
"version": "1.0.0",
"main": "index.ts"
}🔹 3. 创建 apps 目录（主应用和子应用）
mkdir -p apps/main-app apps/sub-app📌 配置主应用
cd apps/main-app
pnpm init
pnpm add react react-dom @micro/shared-ui @micro/shared-utils在 App.tsx 里使用共享组件和方法
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;📌 配置子应用
cd ../sub-app
pnpm init
pnpm add react react-dom @micro/shared-ui @micro/shared-utils子应用 App.tsx
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 里安装依赖
回到项目根目录，运行：
pnpm installpnpm 会自动去重依赖，所有 packages 和 apps 共享相同的 node_modules，提升构建速度。
三、启动主应用和子应用
方式 1：独立运行（适合非微前端模式）
cd apps/main-app && pnpm start
cd apps/sub-app && pnpm start这样主应用和子应用可以各自独立运行。
方式 2：微前端整合（适合 qiankun、Module Federation）
使用 qiankun 微前端框架
主应用（main-app）
import { registerMicroApps, start } from "qiankun";
registerMicroApps([
{
name: "sub-app",
entry: "//localhost:3001",
container: "#subapp-container",
activeRule: "/subapp",
},
]);
start();子应用（sub-app）
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 进行优化。
你目前是想用哪种微前端框架（qiankun、Web Components、Module Federation）？我可以给你更具体的实现方案！
