Vite単体のプロジェクトにTurboRepoを導入してみる

TurboRepoについてですが、単体のパッケージにも使えるとのことだったので、試してみます。

Viteのプロジェクト作成

npm create vite@latest

TurboRepoのインストール

npm i -D turbo

package.jsonの修正

"build": "tsc && vite build"だったところを以下のように二つに分けます。

package.json

    "build": "vite build",
    "type-check": "tsc",

.gitignoreの修正

.gitignoreに以下を追加します。

.turbo

設定完了です。

コマンドの実行

以下のコマンドで実行します。

npx turbo type-check build

以下のようなログが出てビルドが完了しました。
2秒かかったようです。

ログ

• Running type-check, build
• Remote caching disabled
build: cache miss, executing 3de042fe1ab4bf3f
type-check: cache miss, executing 511b9bbdcfef1994
build: 
build: > single-turbo@0.0.0 build
build: > vite build
build:
type-check:
type-check: > single-turbo@0.0.0 type-check
type-check: > tsc
type-check:
build: vite v5.0.4 building for production...
build: transforming...
build: ✓ 34 modules transformed.
build: rendering chunks...
build: computing gzip size...
build: dist/index.html                   0.46 kB │ gzip:  0.30 kB
build: dist/assets/react-h3aPdYU7.svg    4.13 kB │ gzip:  2.14 kB
build: dist/assets/index-4sK4E3Wk.css    1.39 kB │ gzip:  0.72 kB
build: dist/assets/index-YnIXOLyF.js   143.39 kB │ gzip: 46.11 kB
build: ✓ built in 652ms

 Tasks:    2 successful, 2 total
Cached:    0 cached, 2 total
  Time:    2.616s

同じコマンドを実行しました。

npx turbo type-check build

キャッシュが効いているようで、212msで終了しました😊

ログ

• Running type-check, build
• Remote caching disabled
type-check: cache hit (outputs already on disk), replaying logs 511b9bbdcfef1994  
build: cache hit (outputs already on disk), replaying logs 3de042fe1ab4bf3f       
type-check:
type-check: > single-turbo@0.0.0 type-check
type-check: > tsc
type-check:
build:
build: > single-turbo@0.0.0 build
build: > vite build
build:
build: vite v5.0.4 building for production...
build: transforming...
build: ✓ 34 modules transformed.
build: rendering chunks...
build: computing gzip size...
build: dist/index.html                   0.46 kB │ gzip:  0.30 kB
build: dist/assets/react-h3aPdYU7.svg    4.13 kB │ gzip:  2.14 kB
build: dist/assets/index-4sK4E3Wk.css    1.39 kB │ gzip:  0.72 kB
build: dist/assets/index-YnIXOLyF.js   143.39 kB │ gzip: 46.11 kB
build: ✓ built in 652ms

 Tasks:    2 successful, 2 total
Cached:    2 cached, 2 total
  Time:    212ms >>> FULL TURBO

TurboRepoはモノレポマルチパッケージ用のビルドツールだと思っていましたが、単体でも少ない設定で動かせて良かったです。lintやtestなどのタスクを並列で動かす設定も組み込むなどで活用できそうです😊