ReactJS目录结构用于服务器和客户端之间以及不同客户端之间的代码共享

Question

我正在使用 create-react-app 工具构建一个广泛的 React 应用程序。

我的应用程序将有 3 个不同的客户端(一个管理面板、一个工作室面板和一个分析面板)、3 个不同的 React 项目 - admin、studio 和 analytics 和 3 个不同的 git 存储库，以及 3 个不同的团队一起工作。

这些应用程序将由一个服务器调用，该服务器具有我所有的数据库逻辑和我的 GraphQL 服务器(是的，我正在使用中继)以允许客户端访问。

我们将有两类公共(public)代码:

a) 在客户端之间共享:用户体验的东西，比如按钮、标签和主题将在客户端之间共享(所有的用户体验都是 React 组件)

B) 在客户端和服务器之间共享:模式、验证器和其他通用代码将在服务器和客户端之间共享。

我的第一个目录结构是:

project
|
|-client
|   |---- admin
|   |       |---- src
|   |              |-------- <Admin code here>
|   |---- studio
|   |       |---- src
|   |              |-------- <Studio code here>
|   |---- analytics
|   |       |---- src
|   |              |-------- <Analytics code here>
|   |---- ux
|          |---- src
|                 |-------- <UX code here>
|   
|-server
|   |-------<Server code here: routes, GraphQL, etc.>
|   
|-common
|   |----- <Common code here (metadata schemas, validators, etc.)>

虽然不错，但这不适用于 React，因为 create-react-app 不能包含在 src 之外的构建包代码中，所以它不允许我在客户端包中包含 ux 也不是常见的common 中的代码。此外，在构建案例中，只有 src 中的代码会被 ES6 解释，所以即使我包含外部代码，我也无法编译最终的包。

我不想继续构建链接和副本，那么上述用例的解决方案是什么？

如何组织文件夹，以便我可以在客户端之间共享 ux 代码，并在服务器和客户端之间共享 common 中的通用代码？

解决方案必须考虑到我在所有模块中使用 ES6，并且我需要在最后为每个客户端构建最终包(npm run build 来自 create-react-app)?

Answer 1

我建议您将所有客户端代码拆分到不同的 React 应用程序中，并使用 nginx 或 apache 虚拟主机来处理这些模块。根据代码管理的目的，上面的事情不会起作用。因此，为 admin-panel、studio、analytics 和 ux 制作 React 应用程序，您将很容易管理每个模块。