如何基于同一配置文件构建多个React应用？

一、先规划项目目录结构 #

把共享配置、公共代码抽离到根目录的shared文件夹，每个独立React应用放在apps子目录下，结构如下：

root/
├── shared/
│   ├── config/
│   │   ├── tailwind.config.cjs
│   │   ├── postcss.config.cjs
│   │   └── babel.config.json
│   ├── components/     # 公共UI组件（比如Button、Card）
│   ├── utils/          # 公共工具函数
│   └── package.json    # 可选，用于管理共享依赖
├── apps/
│   ├── app-dashboard/  # 对应Django的仪表盘页面
│   │   ├── src/
│   │   │   ├── index.jsx
│   │   │   └── App.jsx
│   │   ├── public/
│   │   └── package.json
│   └── app-form/       # 对应Django的表单页面
│       ├── src/
│       ├── public/
│       └── package.json
└── package.json        # 根目录配置，用workspace管理所有子项目

二、用npm/yarn Workspaces统一管理依赖 #

避免每个子应用重复安装相同依赖，在根目录的package.json里配置workspaces：

{
  "name": "react-multi-apps",
  "private": true,
  "workspaces": [
    "shared",
    "apps/*"
  ]
}

之后在根目录执行npm install，所有子应用和共享目录的依赖会被统一安装到根目录的node_modules，子应用可以直接使用这些依赖，不用单独安装。

三、共享配置文件的引用方式 #

1. Tailwind & PostCSS #

每个子应用不需要写完整的tailwind配置，直接导入共享的基础配置，还能按需扩展：

// apps/app-dashboard/tailwind.config.cjs
const baseConfig = require('../../shared/config/tailwind.config.cjs');

module.exports = {
  ...baseConfig,
  // 子应用专属配置，比如只扫描当前应用的文件
  content: [
    ...baseConfig.content,
    './src/**/*.{js,jsx,ts,tsx}',
  ],
};

PostCSS配置同理：

// apps/app-dashboard/postcss.config.cjs
module.exports = require('../../shared/config/postcss.config.cjs');

2. Babel #

子应用的babel配置直接继承共享配置：

// apps/app-dashboard/babel.config.json
{
  "extends": "../../shared/config/babel.config.json"
}

3. 构建工具（Vite/CRA） #

如果用Vite，子应用的vite.config.js可以导入共享的基础配置并扩展：

// apps/app-dashboard/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import baseConfig from '../../shared/config/vite.config.base.js';

export default defineConfig({
  ...baseConfig,
  plugins: [react()],
  build: {
    ...baseConfig.build,
    outDir: 'dist', // 每个子应用的构建产物单独存在自己的dist目录
  },
});

如果用Create React App，安装craco来覆盖默认配置，子应用的craco.config.js导入共享配置：

// apps/app-dashboard/craco.config.js
const baseCracoConfig = require('../../shared/config/craco.config.js');

module.exports = {
  ...baseCracoConfig,
  // 子应用自定义配置
};

四、子应用的package.json配置 #

每个子应用的package.json只需要定义专属的启动、构建脚本，依赖只保留子应用独有的：

{
  "name": "app-dashboard",
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    // 只放这个应用独有的包，共享依赖不用重复写
  }
}

五、开发与构建流程 #

1. 安装依赖：在根目录执行npm install，一次性搞定所有项目的依赖。
2. 启动子应用开发服务：
   • 进入子应用目录：cd apps/app-dashboard，执行npm start
   • 或者直接在根目录执行：npm run start --workspace=app-dashboard
3. 构建子应用：
   • 进入子应用目录执行npm run build，产物会在子应用的dist文件夹，之后手动复制到Django对应的目录即可。
   • 要批量构建所有应用，在根目录的package.json添加脚本：

     {
       "scripts": {
         "build:all": "npm run build --workspaces"
       }
     }
     

     执行npm run build:all就能一次性构建所有子应用。

六、额外优化点 #

• 公共代码复用：把通用的组件、工具函数放在shared/components和shared/utils，子应用直接导入使用，比如import Button from '../../shared/components/Button';。
• 统一代码规范：在根目录配置ESLint、Prettier，子应用的配置文件直接继承根目录的，确保所有应用代码风格一致。
• 环境变量：根目录放通用的.env文件，子应用可以自己加.env.local覆盖专属变量。

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