ReactJS同代码库多站点差异化打包模块找不到问题求助

• 问题1：config-overrides.js 中 override 函数调用语法错误
  你当前的写法是先调用空的override()再传入配置，正确写法是将所有配置项作为参数直接传入override函数。
• 问题2：Windows set 命令赋值后多余空格导致环境变量值错误
  脚本中set CLIENT=site1 && 等号后有多余空格，会导致process.env.CLIENT的值变为site1 （末尾带空格），拼接的路径无法匹配实际文件夹。
• 问题3：组件导入名与使用名不匹配
  代码中你导入组件时命名为A，但实际使用的是<Login/>，变量名不对应会报错。另外你报错信息提示找不到@app/Login，需要检查代码中是否误将别名@a写为了@app。
• 问题4：文件夹缩进错误隐患
  你给出的文件夹结构中site1下的Login.js缩进层级错误，需要确认实际文件路径确实为src/resource/site1/Login.js，和站点目录下的styles文件夹同级。

修复后的代码 #

1. config-overrides.js #

const path = require('path');
const { addWebpackAlias, override } = require('customize-cra')

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, './src/'),
    // 加默认值防止环境变量取不到时报错
    "@a": path.resolve(__dirname, `./src/resource/${process.env.CLIENT || 'site1'}`),
  })
)

2. package.json scripts 配置 #

如果仅在Windows环境运行，直接去掉空格即可：

"scripts": {
  "start:site1": "set CLIENT=site1&&react-app-rewired start",
  "build:site1": "set CLIENT=site1&&react-app-rewired build",
  "start:site2": "set CLIENT=site2&&react-app-rewired start",
  "build:site2": "set CLIENT=site2&&react-app-rewired build"
}

如果需要兼容Mac/Linux环境，先安装cross-env：
npm i cross-env -D
再修改scripts：

"scripts": {
  "start:site1": "cross-env CLIENT=site1 react-app-rewired start",
  "build:site1": "cross-env CLIENT=site1 react-app-rewired build",
  "start:site2": "cross-env CLIENT=site2 react-app-rewired start",
  "build:site2": "cross-env CLIENT=site2 react-app-rewired build"
}

3. App.js 代码修正 #

import './App.css';
import Login from '@a/Login'; // 导入名和使用名保持一致

function App() {
  return (
    <div className="App">
      sss
      <Login/>
    </div>
  );
}

export default App;

扩展优化（可选） #

如果需要实现「站点专属文件不存在时自动加载通用文件」的 fallback 逻辑，可以在webpack配置中添加resolve.alias的fallback配置，或者调整resolve.modules的优先级，实现通用代码和站点代码的自动合并。

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