React + backend - 共享代码时的项目结构

Question

我真的很喜欢可以看出该文件夹结构在这里有一个前端做出反应和处理时，一些后端与快递：

root
??? backend
|   ??? node_modules
|   ??? public
|   ??? src
?   ?   ??? Server.ts
|   ??? package.json
|   ??? tsconfig.json
??? frontend (created using create-react-app)
|   ??? node_modules
|   ??? public
|   ??? src
?   ?   ??? Index.js
|   ??? package.json
|   ??? tsconfig.json

我认为将单独的包与个人分开node_modules是合理的，因为前端和后端基本上是完全不同的东西，例如它们需要不同的节点模块。此外，这种模块化方法在视觉上对我很有吸引力，并且存储库看起来很整洁。

---

但是，当我需要在前端和后端之间共享内容时，我遇到了这种结构的问题。我shared在项目根目录下添加了一个文件夹，该文件夹包含自己的项目和自己的tsconfig.json，package.json等等。这种方法是here和here方法的混合。对于后端，这完全正常：设置了tsconfig.json适当的（使用TypeScript 项目引用和别名导入），我可以root/shared/src/myFile.ts像这样引用文件：

root
??? backend
|   ??? node_modules
|   ??? public
|   ??? src
?   ?   ??? Server.ts
|   ??? package.json
|   ??? tsconfig.json
??? frontend (created using create-react-app)
|   ??? node_modules
|   ??? public
|   ??? src
?   ?   ??? Index.js
|   ??? package.json
|   ??? tsconfig.json

我使用create-react-app. 别名导入不起作用对我来说没关系，所以我必须使用（在前端的 src 文件夹中）：

import { myFunction } from @shared/myFile;

可悲的是，来自外部的这些进口src目录，不支持通过create-react-app，我不想用eject，因为我有没有的WebPack经验，不希望维护所有在我自己的配置文件（这就是为什么我用create-react-app摆在首位）。

---

我知道我可以将共享内容移动到前端的src目录。但这意味着，我必须添加在 TypeScript 中使用Project References所需的标签，例如设置composite为 true，在前端的tsconfig.json这对我来说似乎很奇怪，感觉更像是一个黑客。我想有一个单独的 npm 项目，其中包含我的共享内容。

由于create-react-app本质上不支持从src目录外部导入，我想也许我把大局弄错了。我现在使用的文件夹结构不是如何设置带有后端的 React 项目的有效方法吗？create-react-app提供什么机制来链接前端和后端之间的文件？我还可以考虑拥有一个带有src文件夹的根项目，并且在其中包含两个文件夹backend和frontend. 但这意味着，我们将node_modules在根目录中有一个共享文件夹。

这是我使用 React 的第一个项目，我很想了解此类架构问题的一些最佳实践。一些指向可信赖资源的链接，其中解释了全栈 React 开发的项目结构，这将非常有帮助。谢谢

Answer 1

希望在前端和后端之间共享代码是完全合理的。这是使用 javascript 而不是 Ruby 或 PHP 进行编码的原因之一。

您可以通过使用 yarn 而不是 npm 和 yarn 工作区来完成您想要的工作：https : //yarnpkg.com/lang/en/docs/workspaces/。在顶层，您在 package.json 中设置了三个模块/包（确保在各自的 package.json 文件中正确命名工作区）：

"workspaces": {
    "packages": [
        "backend",
        "frontend",
        "shared"
    ]
},

完成后，您可以像这样在 CRA 应用程序或后端导入共享代码：

import { myFunction } from 'shared/src/myFile';

唯一的缺点是，只要您使用 CRA ，就无法将共享目录中的react 组件导入前端。现在这不会影响您，因为您只有一个 React 应用程序。如果您需要在多个项目之间共享 React 组件，请查看上面的一些建议，例如 bit.dev。

这不是唯一的方法，但它是最简单和最直接的方法之一。

Answer 2

架构是一个棘手的问题，每个人都有不同的意见，每个选项都有优点和缺点。

我个人认为最好将后端和前端分成单独的项目并保持这种状态。现在，由于 JavaScript/React/Node 鼓励基于组件的方法，因此在它们之间共享代码的一种非常好的方式是 Bit.dev。

https://bit.dev

我目前正在使用它在三个 Web 应用程序和一些 Node 微服务之间共享组件和功能。

可以在此处找到 React 应用程序的良好结构，此结构运行良好且扩展性很好：

https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af

至于 Express，有很多构建项目的方法，但我个人推荐一个文件夹用于您的 Routes，一个文件夹用于您的控制器，这是 Routes 的逻辑所在。然后从那里走。看看这个链接：

https://www.freecodecamp.org/news/how-to-write-a-production-ready-node-and-express-app-f214f0b17d8c/

根据您的建筑物，您甚至可能不需要完整的后端，您可以在此处查看 JAMStack 以获取更多信息：

https://jamstack.org

我会考虑将它们分开，但随着项目的扩展，它更容易管理。你可以在 Netlify 之类的东西上发布你的前端，然后使用 AWS 或 Azure 之类的东西来托管你的 Node/Express 服务器。