React项目独立模块化选型：微前端 vs Monorepo

方案对比与推荐 #

Monorepo 适配性 #

完全匹配你的需求：

• 并行开发：每个业务模块/共享包是独立的package，可单独开发、调试
• 模块改动不影响整体：通过构建工具（如pnpm filter、TurboRepo）仅构建改动的模块
• 共享依赖/UI/全局状态：将公共UI组件、全局状态管理抽成独立共享包，所有业务模块直接引用，依赖统一在根目录管理
• 构建产物：每个业务模块可独立构建为标准React build文件夹（含.js、.css、index.html等）

微前端（如Module Federation）适配性 #

适合跨框架、完全独立部署的场景，但对于全React技术栈的项目，共享状态和依赖的复杂度更高，额外的通信层会增加维护成本，并非最优选择。

最终推荐：基于pnpm Workspaces的Monorepo方案，轻量且完全满足需求。

简单实现示例 #

1. 初始化Monorepo结构 #

mkdir react-monorepo && cd react-monorepo
pnpm init
# 创建pnpm workspace配置文件
echo "packages:
  - packages/*
  - apps/*" > pnpm-workspace.yaml

2. 创建共享包 #

共享UI包（packages/ui）

mkdir -p packages/ui && cd packages/ui
pnpm init
# 声明React为peer依赖（避免重复打包）
pnpm add react react-dom --peer

创建src/Button.js：

import './Button.css';

export const Button = ({ children, variant = 'primary' }) => {
  return <button className={`btn btn-${variant}`}>{children}</button>;
};

创建src/Button.css：

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-primary {
  background: #2563eb;
  color: white;
}

创建src/index.js：

export { Button } from './Button';

全局状态共享包（packages/store）

cd ../.. && mkdir -p packages/store && cd packages/store
pnpm init
pnpm add react react-dom --peer

创建src/GlobalContext.js：

import { createContext, useContext, useState } from 'react';

const GlobalContext = createContext();

export const GlobalProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  return (
    <GlobalContext.Provider value={{ user, setUser }}>
      {children}
    </GlobalContext.Provider>
  );
};

export const useGlobal = () => useContext(GlobalContext);

创建src/index.js：

export { GlobalProvider, useGlobal } from './GlobalContext';

3. 创建业务模块（apps/dashboard） #

cd ../.. && npx create-react-app apps/dashboard --template cra-template
# 链接共享包到业务模块
pnpm add @monorepo/ui @monorepo/store --workspace

修改apps/dashboard/src/App.js：

import { Button } from '@monorepo/ui';
import { useGlobal } from '@monorepo/store';

function App() {
  const { user, setUser } = useGlobal();
  return (
    <div className="App">
      <h1>Dashboard</h1>
      <Button onClick={() => setUser({ name: 'Rick' })}>
        {user ? `Welcome ${user.name}` : 'Login'}
      </Button>
    </div>
  );
}

export default App;

修改apps/dashboard/src/index.js，添加全局状态提供者：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { GlobalProvider } from '@monorepo/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GlobalProvider>
      <App />
    </GlobalProvider>
  </React.StrictMode>
);

4. 构建与运行 #

• 单独构建某业务模块：

pnpm run build --filter "dashboard"

执行后apps/dashboard/build会生成标准React构建产物。

• 单独运行某业务模块：

cd apps/dashboard && pnpm start

内容的提问来源于stack exchange，提问作者rick