react 是纯前端库，无法直接运行 express（node.js 后端框架）；错误源于将服务端代码混入浏览器环境。本文将手把手教你通过目录隔离、独立进程和标准通信方式，安全、可维护地实现 react + express 协同开发。
react 是纯前端库，无法直接运行 express（node.js 后端框架）；错误源于将服务端代码混入浏览器环境。本文将手把手教你通过目录隔离、独立进程和标准通信方式，安全、可维护地实现 react + express 协同开发。
你遇到的这一长串 Module not found: Error: Can't resolve 'fs'、'path'、'crypto' 等报错，并非配置疏漏，而是一个根本性架构误用：你在 React 前端应用（浏览器环境）中，试图直接 require('express')。
这是不可行的——Express 是为 Node.js 运行时设计的服务端框架，它重度依赖 fs、http、path、crypto 等 Node.js 原生模块。而现代 React 项目（无论是 CRA 还是 Vite）默认使用 Webpack 5+ 或 Vite 构建，它们明确移除了对 Node.js 核心模块的自动 polyfill 支持（出于安全与体积考量）。浏览器中根本不存在 fs.readFile() 或 http.createServer()，强行引入只会触发数十个“无法解析”错误。
✅ 正确解法不是“给浏览器加 polyfill”，而是 严格分离前后端职责：
一、项目结构：物理隔离是前提
不要在 src/App.js 或任何 React 组件里写 const express = require('express')。请重构目录如下：
my-react-express-app/
├── frontend/ # React 前端（原 create-react-app 项目）
│ ├── public/
│ ├── src/
│ ├── package.json # "scripts": { "start": "react-scripts start" }
│ └── ...
├── backend/ # 独立 Express 后端
│ ├── server.js # 主入口文件
│ ├── package.json # "scripts": { "dev": "nodemon server.js", "start": "node server.js" }
│ └── ...
└── package.json # （可选）根目录 workspace 配置（推荐用于 monorepo 管理）✅ 关键动作：
Orderly Sdk React Hooks下载Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
- 将原
create-react-app项目整个移入frontend/文件夹；- 在项目根目录新建
backend/，并cd backend && npm init -y && npm install express；backend/server.js示例：// backend/server.js const express = require('express'); const app = express(); const PORT = 5000;app.use(express.json()); app.get('/api/hello', (req, res) => { res.json({ message: 'Hello from Express!' }); });
app.listen(PORT, () => { console.log(
✅ Backend running on http://localhost:${PORT}); });
二、启动方式：双进程并行开发
- 前端：
cd frontend && npm start→ 默认启动在http://localhost:3000 - 后端：
cd backend && npm run dev（需先npm install -D nodemon）→ 运行在http://localhost:5000
⚠️ 注意跨域问题：React 前端调用 fetch('/api/hello') 会默认请求 http://localhost:3000/api/hello（404），而非你的 Express 服务。解决方案：
方案 A：前端代理（推荐，零配置）
在 frontend/package.json 中添加：
"proxy": "http://localhost:5000"
之后，在 React 组件中直接调用：
// frontend/src/App.js
useEffect(() => {
fetch('/api/hello') // 自动代理到 http://localhost:5000/api/hello
.then(res => res.json())
.then(data => console.log(data));
}, []);方案 B：后端启用 CORS（生产就绪）
在 backend/server.js 中安装并使用 cors：
npm install cors
const cors = require('cors');
app.use(cors()); // 允许所有源（开发用）
// 或更安全的配置：
// app.use(cors({ origin: 'http://localhost:3000' }));三、构建与部署：前后端独立打包
- 开发阶段：双服务并行，代理/CORS 解决通信；
-
生产构建：
-
cd frontend && npm run build→ 生成frontend/build/静态文件； - 修改
backend/server.js，添加静态托管：const path = require('path'); app.use(express.static(path.join(__dirname, '../frontend/build'))); app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, '../frontend/build', 'index.html')); }); -
cd backend && npm start→ Express 同时服务 API + 前端静态资源（单端口，如:5000）
-
⚠️ 重要提醒：避开常见陷阱
- ❌ 不要全局安装
express或create-react-app（易版本冲突）；始终使用npx create-react-app@latest和npm install express --save（在 backend 目录内）； - ❌ 不要在
frontend/src/下安装express、body-parser等后端依赖；package.json的依赖必须严格按环境划分； - ✅ 使用 VS Code 多根工作区（Multi-root Workspace）同时打开
frontend/和backend/，提升开发效率； - ✅ 新手强烈建议优先选用 Vite + Express 分离模板（
npm create vite@latest frontend -- --template react+ 手动建 backend），比 CRA 启动更快、配置更透明。
至此，你已建立一个符合现代 Web 开发规范的全栈结构：前端专注 UI 与交互，后端专注数据与逻辑，两者通过清晰的 HTTP 接口协作——这才是可扩展、易调试、团队友好的正确姿势。
