Reaction+Backend-共享代码时的项目结构 [英] React + backend - project structure when sharing code

问题描述

我真的很喜欢这个文件夹结构，here在处理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等等。此方法是here和here方法的混合。对于后端，这完全可以工作：在适当地设置了tsconfig.json(使用TypeScript Project References和aliased imports)之后，我可以像这样引用文件root/shared/src/myFile.ts：

import { myFunction } from @shared/myFile;

我使用create-react-app创建了Reaction前端。别名导入不起作用对我来说没问题，所以我必须使用(在前端的src文件夹中)：

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

遗憾的是，这些导入来自src目录are not supportedbycreate-react-app，我不想使用eject，因为我没有使用webpack的经验，也不想自己维护所有的配置文件(这就是我一开始使用create-react-app的原因)。

---

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

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

这是我与Reaction的第一个项目，我想了解一些解决此类架构问题的最佳实践。一些到可信资源的链接，其中解释了全堆栈Reaction开发的项目结构将会非常有帮助。谢谢你，😊

推荐答案

希望在前端和后端之间共享代码是完全合理的。这也是为什么用Java脚本而不是Ruby或PHP编写代码的原因之一。

通过使用纱线而不是NPM和纱线工作区：https://yarnpkg.com/lang/en/docs/workspaces/，您可以准确地完成您想要的任务。在顶层，您在Package.json中设置了三个模块/包(确保在各自的Package.json文件中正确命名了工作区)：

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

一旦这样做了，您就可以将共享代码导入CRA应用程序或后端，只需如下所示：

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

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

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

这篇关于Reaction+Backend-共享代码时的项目结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！