React 后端 - 共享代码时的项目结构

Question

在处理 React 前端和一些带有 express 的后端时，我真的很喜欢 这里 可以看到的文件夹结构：

 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 等等。这种方法是 此处 和 此处 方法的混合。对于后端，这完全可以正常工作：适当地设置了 tsconfig.json （使用 TypeScript 项目引用 和 别名导入），我可以像这样引用文件 root/shared/src/myFile.ts ：

 import { myFunction } from @shared/myFile;

我使用 create-react-app 创建了 React 前端。别名导入对我来说没关系，所以我必须使用（在前端的 src 文件夹内）：

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

可悲的是，这些从 src 目录之外的导入不受 create-react-app 支持，我不想使用 eject ，因为我没有使用 web-f6bb4 的经验我想自己维护所有配置文件（这就是我首先使用 create-react-app 的原因）。

---

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

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

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

原文由 Splines 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您可以使用 yarn 而不是 npm 和 yarn workspaces 来完成您想要的： 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。

附录！！！如果将 CRA 替换为 CRACO ，现在可以使用 CRA 和 yarn 工作区来共享 React 代码。您所做的就是使用共享的 React 代码创建另一个工作区。然后在每个要访问它的模块中创建一个符号链接：

 root
├── fontend-one
|   ├── symbolic link to frontend-shared
├── frontend-two
|   ├── symbolic link to frontend-shared
├── frontend-shared

每个 CRA 前端模块模块还需要一个 craco.config.js 文件，您可以在其中告诉 web-pack 不要遵循符号链接：

 module.exports = {
    // ...
    webpack: {
        configure: {
            resolve: {
                symlinks: false
            }
        }
    }
};

您通常从共享前端导入：

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

这是一个非常低保真的解决方案，但在我们使用它的那一年中已被证明是可靠的。

原文由 Robert Moskal 发布，翻译遵循 CC BY-SA 4.0 许可协议