Javascript 反应+；后端-共享代码时的项目结构

我非常喜欢使用express处理React前端和some后端时可以看到的文件夹结构：

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_模块的独立包是合理的，因为前端和后端基本上是完全不同的，例如。G它们需要不同的节点模块。此外，这种模块化方法在视觉上对我很有吸引力，而且存储库看起来很整洁


但是，当我需要在前端和后端之间共享内容时，这种结构会遇到问题。我在项目根目录下添加了一个
shared
文件夹，其中包含自己的项目以及自己的
tsconfig.json
、
package.json
等等。这种方法是多种方法和方法的混合。对于后端来说，这非常好：适当地设置了
tsconfig.json
（使用and），我可以像这样引用文件
root/shared/src/myFile.ts
：

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

从@shared/myFile导入{myFunction}；

我使用
create React app创建了React前端。alias导入不起作用对我来说没关系，所以我必须使用（在前端的src文件夹中）：

从“../../shared/src/myFile”导入{myFunction}；

遗憾的是，
create react app
从
src
目录外导入了这些内容，我不想使用
eject，因为我没有使用webpack的经验，也不想自己维护所有配置文件（这就是为什么我首先使用
create react app
）


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

由于
create-react-app
本身不支持从
src
目录外部导入，我想可能是我搞错了大局。我现在使用的文件夹结构不是一种有效的方法来设置带有后端的React项目吗？
create react app
提供了什么机制来链接前端和后端之间的文件？我还可以考虑使用一个带有
src
文件夹的根项目，其中包含两个文件夹
backend
和
frontend
。但这意味着，我们在根目录中有一个共享的
node\u modules
文件夹

这是我与React的第一个项目，我很想了解一些解决此类体系结构问题的最佳实践。一些到可信资源的链接，其中解释了全堆栈开发的项目结构，这将非常有用。谢谢架构是一个棘手的问题，每个人都有不同的观点，每个选项都有利弊

我个人认为最好将后端和前端分离成sperate项目，并保持这种方式。现在，当JavaScript/React/Node采用基于组件的方法时，在它们之间共享代码的一种非常好的方法是Bit.dev


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

在这里可以找到React应用程序的良好结构，该结构运行良好，可扩展性良好：


至于Express，有很多方法可以构建项目，但个人建议为您的路线创建一个文件夹，为您的控制器创建一个文件夹，这就是路线的逻辑所在。然后从那里开始。请查看此链接：


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


我会考虑把它们分开，因为这个项目使它更容易管理。您可以在Netlify之类的设备上释放前端，然后使用AWS或Azure之类的设备来托管您的Node/Express服务器

前端和后端有单独的子项目是非常有意义的，因为它们之间的依赖关系大不相同。混用会增加生产部署中的磁盘空间消耗，并违反安全准则。你的文件夹结构是合理的（除了我不确定的
public/
子文件夹，可能我遗漏了什么）

从@shared/myFile导入{myFunction}的方法是
import很好。只是不要使用CRA

对于具有单个前端和单个后端的项目，不需要
共享\
顶级文件夹，因为前端是“UI真理”的唯一来源（例如，与UI相关的类型和组件的来源）前端和后端所使用的API是前端和后端所使用的“API真理”的唯一来源。通过这种安排，只需共享
@backend/api\u shared\u内容

一些到可信资源的链接，其中解释了全堆栈开发的项目结构，这将非常有用。一方面，通常项目作者必须解释大量其他事情，另一方面，保持文档（通常是自述文件）合理简洁。您可能会发现，提供一个理由/解释为什么子目录结构是这个而不是那个不是最高优先级

我认为在前端和后端之间共享代码是完全合理的。这是我们用javascript而不是Ruby或PHP编写代码的原因之一

通过使用纱线而不是npm和纱线工作区，您可以完全实现您想要的。在顶层，您在package.json中设置了三个模块/包（确保在各自的package.json文件中正确命名工作区）：

一旦您这样做了，您就可以导入
import { myFunction } from 'shared/src/myFile';