react.js 桌面和移动 web 项目架构

Question

我非常关心我的网络项目架构，它将拥有独立的移动和桌面网络应用程序。

我已经完成了基于“create-react-app”项目模板的网页版开发，对于移动版，我想尽可能地重用我现有的网页版组件。

我们将使用单独的 URL “www”（用于桌面）和“m”（用于移动）提供这些服务。

我正在考虑两种可能的方法。

1. 只需为移动设备构建另一个 create-react-app 项目并共享通用代码。
2. 在已有的 web 客户端 create-react-app 项目 src 文件夹中，制作移动版本代码，如 component.js component.web.js component.mobile.js。但在这种情况下，我担心捆绑 js 文件的大小。

我也考虑过响应式网页设计，但我们的布局和组件完全不同。

通过视口或 url(www/m) 的大小在组件内渲染两个不同的布局可能是另一种可能的方式，但我很有可能使用服务器端渲染...

解决这个问题的好方法是什么......

Answer 1

我会这样处理：-

1. 将所有业务逻辑移动到一个通用包中，并在移动设备和 Web 中使用。这将使您的逻辑通用。
2. 将所有常用组件/配置/颜色等移动到一个通用包中，并在两个应用程序中使用它们。

3. 分别处理两个应用的视图部分。

   我也考虑过响应式网页设计，但我们完全有 不同的布局和组件。

   如果您有完全不同的布局和组件，我建议您将移动设备和网络分开。它不仅与包大小有关，您可以通过延迟加载来解决它，但您的代码复杂度可能会增加。

Answer 2

您可以使用相同的代码并使用 Cordova Framework 构建移动应用程序 因为您的网络代码将是生成应用程序的代码。

您也可以为多个平台创建。 通过官方网站。 https://cordova.apache.org/docs/en/latest/guide/cli/index.html