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

我正在使用

createreact-app

工具构建一个广泛的react应用程序

我的应用程序将有3个不同的客户端（一个管理面板、一个工作室面板和一个分析面板）、3个不同的react项目—

Admin

、

Studio

和

Analytics

以及3个不同的git存储库，以及3个不同的团队一起工作

这些应用程序将由一个服务器调用，该服务器拥有我的所有数据库逻辑和GraphQL服务器（是的，我使用的是中继），以允许从客户端进行访问

我们将有两类通用代码：

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.)>

项目
|
|-客户
||------管理员
|| |------src
|   |              |-------- 
||------工作室
|| |------src
|   |              |-------- 
||------分析
|| |------src
|   |              |-------- 
||------ux
||------src
|                 |-------- 
|   
|-服务器
|   |-------
|   
|-普通的
|   |----- 

尽管很好，但这对React不起作用，因为create React app不能在src之外包含内置包代码，因此它不允许我在客户端包中包含

ux

，也不允许在

common

中包含公共代码。此外，在构建案例中，只有

src

内部的代码将被ES6解释，因此即使我包含外部代码，我也无法编译最终的包

我不想到处建立链接和副本，那么对于上面的用例有什么解决方案呢

如何组织文件夹，以便在客户端之间共享

ux

代码，在服务器和客户端之间共享

common

中的公共代码

---

解决方案必须考虑我在所有模块中使用ES6，并且我需要为每一个客户端建立最终的捆绑包（<代码> NPM运行生成< /代码>从<代码>创建反应APP<代码>）？

我建议您将所有客户端代码拆分为不同的react应用程序，并使用

nginx

或

apache

虚拟主机处理这些模块。根据代码管理的目的，上述内容将不起作用。因此，为

管理面板

、

工作室

、

分析

和

用户体验

制作react应用程序，您可以轻松管理每个模块