monorepo & turbo

将多个项目存放在同一个 git 仓库中，将项目放入不同的工作区，各个工作区之间互相引用模块，实现代码共享。

monorepo 文件结构

前端项目使用包管理器管理 monorepo。

my-monorepo
├─ docs
├─ apps
│  ├─ pc
│  └─ mobile
├─ packages
│  ├─ tsconfig
│  └─ shared-utils
└─ root-files

如果将docs、 apps 和packages 下的所有目录设为工作区，需要在根目录如下设置

npm

在根目录的 package.json 文件中配置 workspaces 字段。在workspaces 中配置工作区列表。

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "workspaces": ["docs", "apps/*", "packages/*"]
}

yarn

在根目录的 package.json 文件中配置 workspaces 字段。在workspaces 中配置工作区列表。

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "workspaces": ["docs", "apps/*", "packages/*"]
}

pnpm

在根目录的 pnpm-workspace.yaml 文件中配置工作区列表。

packages:
  - 'docs'
  - 'apps/*'
  - 'packages/*'

添加工作区依赖

在某个工作区将另一个工作区作为依赖项，需要在其package.json 指明：

npm

{
  "dependencies": {
    "shared-utils": "*"
  }
}

yarn

{
  "dependencies": {
    "shared-utils": "*"
  }
}

pnpm

{
  "dependencies": {
    "shared-utils": "workspace:*"
  }
}

原理解释

在根目录执行npm install 后，npm 会在根目录和每个工作区下载依赖包到 node_modules , 当遇到工作区依赖后，会将工作区符号链接到node_modules, 所以可以将其当做普通依赖一样正常导入。

使用 Turborepo 管理 monorepo

Turborepo 是一个在包管理器提供的monorepo 管理功能之上，提供了更方便并且性能更好的构建系统。

使用 Turborepo只要在根目录安装turbo, 同时在根目录下添加turbo.json 即可开始使用

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"]
    },
    "lint": {}
  }
}

当运行  turbo lint  时，Turborepo 会查看每个工作区中的每个  lint  脚本并运行它。

turbo.json 主要配置

// turbo.json
{
    "$schema": "https://turbo.build/schema.json",
    // 全局环境变量
    "globalEnv": ["GITHUB_TOKEN"],
    // 任务管道
    "pipeline": {
        // 任务名称，会去匹配工作区的同名任务
        "build": {
            // 此任务所依赖的任务列表, 执行此任务前，会先执行依赖的任务
            // ^ 前缀表示，此任务取决于工作区的依赖关系
            // ^build 表示依赖的工作区都执行完 build 之后，再执行此任务
            // 下面的配置表示，执行 turbo build 时，会先执行 turbo lint
            // 和依赖项中的 build 任务
            "dependsOn": ["lint", "^build"]，
            // 缓存输出文件
            "outputs"：["dist/**"],
            // 是否缓存 outputs, 默认 true
            "cache": true,
            // 只在匹配的文件发生更改时重新运行任务
            "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts"],
            // 标记长时间运行的任务，比如 dev
            "persistent": true,
        }
    }
}