如何将多个“feature” React 应用集成到单体 PHP 仓库中

44次阅读

问题描述

在一个单体 Laravel 仓库中，我们正处于迁移到更清晰、更易维护的开发模式的过程中。我们最近开始将现有的基于 PHP 的视图迁移到多个基于 React 的“feature”中，这些功能位于一个名为 /react 的目录下，并且按照 /react/featureName 的子目录结构进行组织。这意味着 Laravel 的控制器主要负责数据和认证方面的工作。

每个“feature”由一个或多个开发人员维护，它们有各自的依赖、测试和功能。目前，我们在项目的公共根目录下为每个功能提供构建结果，结构如下：

js/FeatureName.hashed.jscss/FeatureName.hased.css

尽管这种方式非常适用，但我们在多个“feature”之间共享许多包，例如 React 自身、react-router 等。我们打算尽量使用 Laravel 的 mix.js，但也可以直接在 webpack.config 上进行修改。

我已经探索了使用 mix.extract() 选项来将供应商（vendor）代码与其他应用逻辑分开打包，但这似乎仅限于此。因此，我有以下问题：

如何管理存在于每个“feature”目录中的多个 package.json 文件？
如何确定共同使用的包，并将它们锁定在根目录的 /package.json 文件中？（所有开发人员已经使用 yarn）
如何以尽可能少的麻烦为基于 React 的所有开发人员完成此操作，使他们能够继续进行现有的开发工作，而 DevOps 负责处理繁琐的部分？

解决方案

请注意以下操作可能涉及版本差异及修改前做好备份。

管理多个 package.json 文件

为了管理多个位于每个“feature”目录中的 package.json 文件，可以考虑以下几种方法：

每个“feature”保留独立的 package.json 文件： 每个“feature”都保留自己的 package.json 文件，以便维护其独立的依赖关系和配置。在构建应用时，CI/CD 系统可以读取每个“feature”目录中的 package.json 文件，并根据其中的依赖来进行构建。这种方法使每个“feature”都可以独立地管理其依赖关系，但需要在构建过程中注意版本控制。
统一依赖管理： 如果存在一些共同使用的依赖包，可以考虑将这些依赖包统一管理，将它们添加到根目录下的 /package.json 文件中。然后，每个“feature”只需要指定自己的特定依赖即可。这可以减少重复的依赖安装，但需要注意依赖之间的版本兼容性。

确定共同使用的包并锁定到根 package.json 文件

为了确定共同使用的包并将它们锁定到根目录的 /package.json 文件中，可以按照以下步骤进行：

识别共同依赖： 与开发团队合作，确定哪些依赖在多个“feature”中共同使用。这些通常是 React、react-router 等通用库。
更新根 package.json： 在根目录的 /package.json 文件中，将这些共同依赖添加到 dependencies 部分。确保指定适当的版本，以便与现有的“feature”兼容。
移除重复依赖： 在每个“feature”目录中的 package.json 文件中，移除已经添加到根 package.json 中的共同依赖。这样可以避免重复安装相同的包。

简化开发人员流程并交由 DevOps 处理

为了最大程度地减少开发人员的麻烦，并将一些操作交由 DevOps 处理，可以采取以下方法：

统一构建脚本： 为所有“feature”定义统一的构建脚本，以确保构建过程的一致性。开发人员只需运行相同的构建命令，无需担心特定的依赖安装步骤。
自动化依赖安装： 在 CI/CD 流程中，通过读取每个“feature”目录中的 package.json 文件，自动安装相应的依赖。这可以通过脚本实现，以减轻开发人员手动安装依赖的负担。
定期检查依赖更新： 配置 CI/CD 流程，定期检查并更新依赖的版本。这有助于保持依赖的最新状态，同时也需要注意版本兼容性。

请注意，以上方法可能因团队的实际情况而异。最重要的是与开发团队和 DevOps 团队进行充分的沟通，确保选择的方案能够满足所有人的需求，并在整个团队中得到有效的实施。