npm workspaceのモノレポにTurboRepoを導入する

以下の記事でnpm workspaceを使ってReactのプロジェクトをマルチパッケージ化しました。
https://zenn.dev/collabostyle/articles/9e1b08d41210bb
今回の記事では、このモノレポにTurboRepoを導入していきます。

モノレポを用意します。

TurboRepoをインストールする

導入するモノレポのルートにインストールを行います。

npm i -D turbo

turbo.jsonを追加します

リポジトリのルートにturbo.jsonを追加します。

turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["./dist/**"]
    },
    "lint": {},
    "dev": {
      "cache": false,
      "persistent": true
    },
    "preview": {
      "dependsOn": ["build"],
      "outputs": ["./dist/**"],
      "persistent": true
    }
  }
}

.gitignoreを設定する

.gitignoreに設定を加えます。

.turbo

UIパッケージを編集する

現状UIパッケージ側はlintコマンド以外は使わないためpackage.jsonからコマンドを削除します。

UIパッケージのturbo設定を追加します。

packages/ui/turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "extends": ["//"],
  "pipeline": {
    "build": {
      "outputs": ["dist/**"]
    }
  }
}

以上で設定完了です。

コマンドを実行する

ルートにてパッケージのインストールをします。

npm i

以下のコマンドでビルドが出来ます👍

npx turbo build

以下のコマンドで開発モードで起動が出来ます🙌

npx turbo dev

npm workspaceの設定に乗っかることで設定ができました😊