如何使 Node 和 React 应用程序共享类

Posted 2023-03-07

【中文标题】如何使 Node 和 React 应用程序共享类

【英文标题】：How to make Node and React app to share classes

【发布时间】：2021-04-22 07:24:00

【问题描述】：

我正在使用 TypeScript 构建一个 Node 和 React 应用程序。其目录树如下：

我的问题：

由于我对两个堆栈使用相同的语言，并且将来还会使用 TypeScript 添加 React Native，所以我想知道如何创建一组用于所有堆栈的类。

我为什么要这样做：

DRY（不要重复自己）：我的目的是充分利用在所有层中使用相同的编程语言，因此创建两个相等的类是没有意义的。

到目前为止我所做的尝试：

我创建了第三个名为“util”的文件夹并放置了一个通用类，只是为了使用它来测试 Node 和 React。像这样：

在 Node.js 中，我使用以下命令将其导入：

import Person from "../../util/person.class";

而在 React.js 中，我使用相同的逻辑来导入它：

import Person from "../../util/person.class";

正如我已经预料的那样，两者都拒绝使用各自根文件夹之外的文件：

我也在互联网上搜索过这个，我发现了一些“弹出”命令，一旦使用，就没有办法回来了，无论如何。我想避免这种方式。有什么方法可以让我对我有利吗？

我还想提一下，我使用“tsc --init”为后端​​创建了一个 tsconfig.json，并将 rootDir 设置为“./src/”，将 outputDir 设置为“./dist/”。

谢谢。

【问题讨论】：

称它为app-lib，并像任何其他依赖项一样将其安装为模块，而不是通过相对路径导入单个文件。

你的意思是我应该将“util”文件夹替换为“lib”？您是否有任何来源，以便我可以阅读并将其用作模块？

我的意思是你应该制作它自包含的模块，你通常会称它为库而不是实用程序。要安装本地依赖项，请参见例如docs.npmjs.com/cli/v6/commands/npm-link（但其他包管理器也有类似规定）

我喜欢您的解决方案，并会试一试。谢谢伯吉。

【参考方案1】：

您可以设置具有共享功能的第三个项目。然后，您可以将共享包发布到 npm 存储库。然后就可以在前后端项目中安装共享包了。

【讨论】：

甚至不需要将其发布到存储库。

你好，Bergi，本地依赖不是很危险吗？我的意思是，如果我不小心删除了它的代码，我想我会永远迷路。谢谢大家的方法。

@RaphaelAlvarenga 您编写的所有代码就是这种情况。与本地依赖或其他无关。该解决方案称为备份 :-)

【参考方案2】：

如果你想从服务器发送反应，那么前端文件应该在后端文件夹下

/app root
   / back-end
      /shared-front-end-classes
      /front-end-desktop
      /front-end-mobile

虽然这不是最好的解决方案

最好的解决方案是将前端托管在不同的服务器上，并使 后端通过 API 完全正常运行

例如：

我有一个我主持的博客

前端：

Github 页面“支持通过小npm package 做出反应”

后端：

托管在 Heroku 上

数据库：

我正在使用 mongoAtlas“云数据库”

---

现在你有 3 个不同的地方来保存你的所有代码，彼此独立

现在你的另一个问题是，你想在两个前端使用相同的类

对我来说，我通常会创建一个包含我想要的所有组件/页面的小型 repo，然后将其导入任何项目以供将来使用

我不确定这是否遵循 DRY 概念，但您不会两次编写代码

【讨论】：

完成 React 项目后，我会构建它并将其移动到后端的“公共”文件夹。但是你提到的方式，前端桌面和移动仍然会抱怨课程不在各自的文件夹中，不是吗？我认为，该类需要位于后端文件夹中。

是的，我在这里添加它们的意思是把它们和那里的类一起添加，我会做一个快速编辑

我在结构中添加了一个共享类文件夹