React构建阶段按需导入客户端配置文件的实现方案咨询

一、重构配置文件目录 #

1. 在项目根目录创建/configs文件夹，按客户端名称建立子目录，将对应配置文件放入：

/configs
├── dean
│   ├── Config.js
│   └── Profile.css
└── john
    ├── Config.js
    └── Profile.css

示例/configs/john/Config.js内容：

const name = "John";
const profilePic = process.env.PUBLIC_URL + '/john-1024.png';
const validateTime = (openingTime) => { /* 原有逻辑 */ return isValid }
export { name, profilePic, validateTime }

/configs/john/Profile.css同步调整主题色等样式变量。

二、配置package.json脚本 #

修改package.json的scripts字段，添加prestart和prebuild钩子脚本，用于自动复制指定客户端的配置到/src目录：

{
  "scripts": {
    "prestart": "node scripts/copy-config.js",
    "start": "react-scripts start",
    "prebuild": "node scripts/copy-config.js",
    "build": "react-scripts build"
  }
}

三、编写配置复制脚本 #

在项目根目录创建/scripts/copy-config.js，实现配置复制与Git忽略逻辑：

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

// 提取命令行传入的客户端名称
const clientName = process.argv[2];
if (!clientName) {
  console.error('请指定客户端名称，例如：npm run start -- dean');
  process.exit(1);
}

// 定义文件路径
const configSrcDir = path.join(__dirname, '../configs', clientName);
const destDir = path.join(__dirname, '../src');

// 复制Config.js到src目录
const configSrcPath = path.join(configSrcDir, 'Config.js');
const configDestPath = path.join(destDir, 'Config.js');
fs.copyFileSync(configSrcPath, configDestPath);

// 复制Profile.css到src目录
const cssSrcPath = path.join(configSrcDir, 'Profile.css');
const cssDestPath = path.join(destDir, 'Profile.css');
fs.copyFileSync(cssSrcPath, cssDestPath);

// 让Git忽略src目录下配置文件的临时修改
try {
  execSync('git update-index --assume-unchanged src/Config.js src/Profile.css');
  console.log(`已切换到${clientName}配置，Git将忽略src配置文件的修改`);
} catch (err) {
  console.warn('Git忽略文件修改失败，可能是文件未被Git跟踪');
}

四、使用方式 #

• 启动开发环境：npm run start -- dean 或 npm run start -- john
• 构建生产版本：npm run build -- john 或 npm run build -- dean

五、关键说明 #

• 构建产物纯净性：构建前只会将指定客户端的配置复制到/src，Webpack打包时仅处理当前目录下的文件，不会包含其他客户端的配置。
• Git无修改提示：通过git update-index --assume-unchanged命令，让Git暂时忽略/src/Config.js和/src/Profile.css的修改，不会在git status中显示变更。若后续需要修改原始基础配置，执行git update-index --no-assume-unchanged src/Config.js src/Profile.css即可恢复跟踪。
• 参数校验：脚本加入客户端参数校验，避免无参数时执行出错。

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