使用create-react-app实现前后端Model共享的问题求助

首先，咱们先拆解你遇到的两个核心问题，再一步步给出解决方案：

为什么你的react-app-rewired配置不生效？ #

你提到打印config时找不到ModuleScopePlugin，这是因为从react-scripts v5版本开始，官方已经移除了这个插件，改用其他机制限制src/目录外的导入。所以你之前删除该插件的代码自然不会起作用。

解决方案：两种路径实现前后端共享代码 #

路径一：让后端支持ES模块，共享代码放在src目录下 #

这个方案不需要修改CRA的配置，更简洁易维护：

1. 切换Node.js模块系统：在项目根目录的package.json中添加一行配置，让Node.js默认使用ES模块：

   "type": "module"
   

2. 整理共享代码结构：把你的DataModel放在src/shared/models/DataModel.js，代码保持不变：

   export default class DataModel { 
     constructor(name) { 
       this.name = name; 
     } 
   }
   

3. 前后端导入方式：
   • 前端（src目录下）：import DataModel from './shared/models/DataModel'（CRA的Webpack会自动补全文件后缀）
   • 后端（server.js）：import DataModel from './src/shared/models/DataModel.js'（Node.js ES模块要求显式添加.js后缀）

路径二：修改CRA配置，允许导入src外的共享代码 #

如果你不想改动后端的模块系统（保持CommonJS），可以把共享代码放在根目录，然后修改Webpack配置解除src/目录限制：

1. 创建共享目录：在项目根目录新建shared/models/DataModel.js，代码同上。
2. 更新config-overrides.js：因为v5+没有ModuleScopePlugin，我们通过添加模块搜索路径或别名来解决：

   const path = require('path');
   
   module.exports = function override(config) {
     // 添加根目录到Webpack的模块搜索路径，允许导入src外的文件
     config.resolve.modules.push(path.resolve(__dirname));
     // 可选：添加别名让导入更简洁（推荐）
     config.resolve.alias['@shared'] = path.resolve(__dirname, 'shared');
     return config;
   }
   

3. 前后端导入方式：
   • 前端：用别名导入更清晰：import DataModel from '@shared/models/DataModel'
   • 后端（CommonJS）：const DataModel = require('./shared/models/DataModel')

注意事项 #

• 共享代码里不要使用前端专属API（比如window、document）或后端专属API（比如fs、process），保证代码的通用性。
• 如果选择路径一，建议使用Node.js v14.13.0及以上版本，确保对ES模块的支持稳定。

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