Lerna / Nx / Turborepo 或其他非 js 应用程序的 monorepo 系统 (php)

Question

我有/frontend（JS/Vue）和/backend（PHP）的存储库docker-compose.yml用于开发。但现在我需要添加另一个 JS 前端，该前端将共享一些组件、库等。我不想重复代码，所以我发现我可以使用许多工具来实现此目的，例如lerna、nx等turborepo，用于使用共享包管理 monorepo。

问题是我发现的所有教程和示例存储库都基于 100% JS 存储库，例如前面的 React + 后面的 Nest 等。

所以问题-用于前。nx在具有多种语言的存储库上有意义，只是为了在 JS 包上利用它？如果是，目录结构应该是什么样子？或者也许有更好的 monorepo 工具是为多种语言设计的，而不仅仅是 JS？

Answer 1

我在 Nx monorepo 中使用 Angular 和 PHP（Yii 框架），两者都工作正常。不知道 Lerna 和 Turborepo 是如何工作的，但 Nx 允许运行 CLI 命令，我将其用于 PHP 部分。我的 monorepo 看起来有点如下：

- apps // <- folder holding my projects
--- project-1
--- project-2
------ web // <- Main frontend app (Angular/JS)
------ electron // <- other JS apps like mobile, capacitor, extension, ...
------ api // <- PHP api overridden config files

- libs
--- web // <- shared JS stuff, most people call it 'shared' folder instead
------ ui // <- my shared design system
--- electron
--- project-2 // <- specific project overrides and locally shared stuff
------ services
------ data-access 
------ ui
--------- button // <- overriding a component from my design system to only apply in project-2
------ api // <- PHP api but only holding overridden files
--- php
------ api // <- shared PHP api code
------ auth // <- another shared PHP app
------ shell // <- another shared PHP app

- dist // <- is where NX will will put all generated code from all apps/libs 

主要思想是，我编写的每个代码都位于该libs文件夹（JS 的 libs/web 和 PHP 的 libs/php）和生成的 Nx 库中，因此它有一个名称（如php-api）可以从任何地方链接它，并且有一个project.json文件保存Nx 配置。

这是我的基本共享代码。一次编写，适用于任何需要它的项目或库。

libs/project-2然后将保存项目 2 的特定代码。仅在该应用程序页面内共享的内容以及我从前面提到的文件夹（或以前的共享层）覆盖的内容，如上面的按钮示例。

里面的代码apps尽可能小，主要是布局和配置。这几乎就是大多数 Nx 文档/教程的建议（对于 JS）。我对 PHP 也做了同样的事情：

1. 我已将所有 Yii api 代码放入其中libs/php/api
2. project-2应用程序特有的所有内容（例如模型、控制器等）文件夹和/或文件都在里面libs/project-2/api
3. 主要配置文件（如 .env）在里面apps/project-2/api
4. 每个 lib 文件夹都需要一个project.json定义它的文件：

{
  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
  "projectType": "library",
  "sourceRoot": "libs/php/api",
  "tags": ["scope:php", "type:api"]
}

5. angular.js就我而言，使用 Angular，根级别有一个文件，我在其中声明了每个 PHP 库名称，以便 Nx 检测到它，我只需添加 2 行"php-api": "libs/php/api"："project-2-api": "libs/project-2/api",

6. 在apps/project-2/api文件夹内，我添加了一个project.json包含以下内容的文件：

{
  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "sourceRoot": "apps/project-2/api",
  "targets": {
    "build": {
      "executor": "nx:run-commands",
      "options": {
        "commands": [
          "mkdir -p dist/apps/project-2",
          "rsync -rtul libs/php/api dist/apps/project-2",
          "rsync -rtul libs/project-2/api dist/apps/project-2",
          "rsync -rtul apps/project-2/api dist/apps/project-2"
        ],
        "parallel": false
      }
    },
    "serve": {
      "executor": "nx:run-commands",
      "dependsOn": ["build"],
      "options": {
        "commands": ["php -S localhost:8081 -t dist/apps/project-2/api/web"]
      }
    }
  },
  "implicitDependencies": ["php-api"]
}

它定义了构建和服务脚本，因此我可以使用 Nx cli 来运行它们，第一个只会将 PHP 文件复制到dist文件夹（尊重我的重写层次结构），而第二个使用 PHP 的内置服务器来服务最终文件夹：

> nx run project-2-api:build

> nx run project-2-api:serve

请注意，我的第一个脚本用于rsync -rtul复制文件，您可以使用cp -R它，我只是发现 rsync 速度更快，因为它能够（使用这些选项）跳过未更改的文件。

所以主要的想法是，我的大部分代码都是编写一次，在需要时覆盖，一个单一的设计系统，我只覆盖它的 CSS，以使用新应用程序获得不同的外观。我对 PHP 也做了同样的事情，即使没有直接支持，我也只是使用nx:run-commands执行器来执行诸如移动文件、实时构建或部署之类的操作。

保存时自动更新

我使用 VSCode，其他 IDE 可能也有类似的方式，在我的例子中，我使用一个名为run-on-save的外部扩展，它在基于提供的正则表达式保存文件时执行命令。我的项目的配置看起来有点如下：

"emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "(/(project-2|php)/(api|yii-shared)/.+).php$",
        "cmd": "nx run project-2-api:build --skip-nx-cache"
      },
      {
        "match": "(/(project-2|php)/(auth|yii-shared)/.+).php$",
        "cmd": "nx run project-2-auth:build --skip-nx-cache"
      },
      {
        "match": "(/(project-2|php)/(shell|yii-shared)/.+).php$",
        "cmd": "nx run project-2-shell:build --skip-nx-cache"
      }
    ]
  }

每次我按 CTR+S 保存 PHP 文件时，dist文件夹都会自动更新。