两个Create React App创建的React应用整合问题求助

1. 先理清核心差异：两类应用的运行环境完全不同 #

你用node app启动的旧应用是Node.js后端服务，而npx create-react-app创建的新应用是浏览器端前端应用，两者的运行环境天差地别：

• 前端CRA运行在浏览器里，根本没有Node.js的核心模块（比如fs、path这类），所以直接在src目录里引入fs必然报错。
• 后端Node应用运行在Node环境，能调用这些核心模块，但不能直接和前端CRA的代码混在同一个src目录下。

2. 正确的整合姿势：前后端代码分离 #

别把后端代码硬塞到CRA的src里，按下面的结构整理：

• 保留新CRA作为前端项目，在项目根目录新建server文件夹，把旧应用的后端代码（包括那个app.js）全移进去。
• 后端的依赖要么统一放在根目录的package.json，要么在server文件夹里单独建一个package.json（更推荐后者，前后端依赖隔离更清晰，避免版本冲突）。

3. 解决fs模块找不到的问题 #

• 如果fs是后端代码里用的：把相关代码移到server文件夹，用node server/app.js在Node环境下运行，前端通过API请求和后端交互，绝对不要在前端代码里直接调用fs。
• 如果是要在前端处理文件：用浏览器自带的File API（比如<input type="file">），别碰Node的fs模块。

4. 排查依赖加载异常的问题 #

如果旧应用的前端依赖在新CRA里加载失败：

• 确认复制到新package.json的依赖版本号和旧应用完全一致，别只抄包名，版本号也要原封不动（比如旧应用里是lodash: ^4.17.21，新的就得一模一样）。
• 删除node_modules和package-lock.json，重新执行npm install，避免缓存搞鬼。
• 检查旧应用代码里的相对路径，比如旧应用里是import xxx from './utils'，移到新CRA后路径是否对应。

5. 调整启动方式 #

• 前端CRA继续用npm start启动，默认端口3000。
• 后端服务可以在server目录下用node app.js启动，或者在根目录的package.json里加个启动脚本：

  "scripts": {
    "start": "react-scripts start",
    "start:server": "node server/app.js"
  }
  

  之后直接用npm run start:server就能启动后端。

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