掘友们好，我是庚云。
在前端工程化不断演进的今天，越来越多的团队开始采用 monorepo 架构来管理项目代码。而说到 monorepo，就不得不提到 pnpm —— 它在这一场景下表现尤为出色。我们可以利用 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 install
pnpm 会自动去重依赖，所有 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 进行优化。
