如何基于React配置客户端与管理端两种不同构建产物

结论：这个方案完全可行，借助react-app-rewired结合环境变量区分构建目标，就能实现一次配置生成两个隔离的构建产物，完美适配你的单仓SPA需求。

具体配置步骤 #

1. 更新package.json的scripts #

新增两个带环境标记的构建命令，同时修改主build命令串联两次构建：

"scripts": {
    "start": "node ./back-end/server.js",
    "build": "npm run build-client && npm run build-admin",
    "build-client": "cross-env BUILD_TARGET=client react-app-rewired build",
    "build-admin": "cross-env BUILD_TARGET=admin react-app-rewired build",
    "front-end": "set HTTPS=true&&set SSL_CRT_FILE=...&&set SSL_KEY_FILE=...&&react-app-rewired start",
    "back-end": "nodemon ./back-end/server.js",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

注：cross-env用于跨Windows/Linux/Mac平台统一环境变量设置，需先执行npm install cross-env --save-dev安装。

2. 修改config-overrides.js #

通过环境变量BUILD_TARGET调整webpack配置，实现两种构建的隔离：

const path = require('path');

module.exports = function override(config, env) {
  const buildTarget = process.env.BUILD_TARGET;

  if (buildTarget === 'client') {
    // 客户端构建：排除src/admin目录
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.include) {
            oneOfRule.exclude = [
              path.resolve(__dirname, 'front-end/src/admin'),
              ...(oneOfRule.exclude || [])
            ];
          }
        });
      }
    });
    // 指定客户端构建输出目录
    config.output.path = path.resolve(__dirname, 'build');
  } else if (buildTarget === 'admin') {
    // 管理端构建：指定入口为admin目录的入口文件
    config.entry = path.resolve(__dirname, 'front-end/src/admin/index.js');
    // 指定管理端构建输出目录
    config.output.path = path.resolve(__dirname, 'build_admin');
    // 限定仅打包admin目录内的代码
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.include) {
            oneOfRule.include = path.resolve(__dirname, 'front-end/src/admin');
          }
        });
      }
    });
  }

  return config;
};

3. 配置管理端独立入口 #

在front-end/src/admin下创建index.js作为管理端SPA的入口文件，示例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import AdminApp from './AdminApp';

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

无需修改public/index.html，管理端构建会复用该模板的根节点id="root"。

4. 后端路由适配示例 #

后端需根据用户认证状态返回对应构建的入口文件，以Node.js/Express为例：

const express = require('express');
const path = require('path');
const app = express();

// 挂载静态文件目录
app.use(express.static(path.join(__dirname, '../build')));
app.use('/admin-static', express.static(path.join(__dirname, '../build_admin')));

// 核心路由逻辑：根据权限返回对应SPA
app.get('*', (req, res) => {
  // 替换为你的实际认证逻辑
  const isAdminAuthenticated = req.isAuthenticated() && req.user.role === 'admin';
  
  if (isAdminAuthenticated) {
    res.sendFile(path.join(__dirname, '../build_admin/index.html'));
  } else {
    res.sendFile(path.join(__dirname, '../build/index.html'));
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

关键注意事项 #

• 两个构建完全隔离，不会出现代码混包问题
• 单仓的node_modules会自动共享，无需重复安装依赖
• 可单独执行npm run build-client或npm run build-admin完成单一构建
• 若管理端需要独立的HTML模板，可在config-overrides.js中修改html-webpack-plugin的模板路径

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