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

Question

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

Answer 1

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

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

所有这些使得拥有一个node-modules项目变得不切实际，因此您需要在和（或）子目录package.json中放置两个项目。clientbackendserver

另一方面，这两个项目需要彼此紧密集成，从而允许无缝的客户端后端调试，甚至涵盖生产构建等。因此，这两个项目都需要位于单个顶级项目（通常称为工作区）的保护下。

建议看看scrap-react。我是作者。