reactjs - 如何正确构建使用 React 的全栈项目？

Question

我想用客户端的 React 和服务器端的 Express.js创建高级全栈项目。哪种文件夹结构做法最好？我想保持简单。该项目可能包含 TypeScript、E2E 和单元测试，它将与服务器端 API 通信并使用 Socket.io 进行实时集成。如果可能的话，我也想保留一个 node_modules 文件和一个 package.json。

标签： reactjsdirectory-structure

Answer 1

如果可能的话，我也想保留一个 node_modules 文件和一个 package.json

在浏览器中运行的 React 应用程序和基于 NodeJS 的 Express 将具有不同的依赖项。开发依赖将与 Typescript 有一些相似之处，但生产依赖将截然不同。您可以尝试为客户端和后端保留与 Jest 相同的测试框架，但 Jest 必须驱动的实际测试库会有所不同，需要不同的 Jest 配置设置。Typescript 编译器设置可以不同。

所有这一切都使得拥有一个node-modules和package.json不切实际，因此您需要在client和backend（或server）子目录中的两个项目。

另一方面，这两个项目需要彼此紧密集成，以允许无缝的客户端后端调试，甚至涵盖生产构建等。因此，两者都需要在一个顶级项目的保护伞下，通常称为工作空间。

建议看一下crisp-react。我是作者。