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

【问题标题】：ReactJS directory structure for code sharing between server and client and between different clientsReactJS 目录结构，用于服务器和客户端之间以及不同客户端之间的代码共享
【发布时间】：2018-08-22 09:57:30
【问题描述】：

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

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

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

我们将有两类通用代码：

a) 客户端之间共享：UX 内容，如按钮、标签和主题将在客户端之间共享（所有 UX stull 都是 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）？

【问题讨论】：

标签： reactjs graphql

【解决方案1】：

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

【讨论】：