npmとTurborepoでMonorepo環境を作ったメモ

概要

monorepo構成を最小限で試してみた。
もはや pnpm と Turborepo で Monorepo 環境作れるからを参考に、npmで試す。

ソースコード

ワークスペースの作成

フォルダ準備

# rootのpackage.json作成
$ npm init
# workspace用の設定を記述
# 各パッケージ用ディレクトリ作成
$ mkdir -p packages/lib-a packages/lib-b

package.json

{
  "packageManager": "npm@9.8.1",
  "workspaces": [ "packages/*"]
}

パッケージ準備

依存される側

packages/lib-a/src/index.ts

export const message = 'HELLO WORLD!'

packages/lib-a/package.json

{
  "name": "lib-a",
  "main": "./dist/index.js",
  "scripts": {
    "build": "tsc ./src/index.ts --outDir ./dist --declaration"
  },
  "devDependencies": {
    "typescript": "^5.2.2"
  }
}

確認

$ npm run build

> lib-a@0.0.0 build
> tsc ./src/index.ts --outDir ./dist --declaration

依存する側

packages/lib-b/src/index.ts

import { message } from "lib-a";

console.log(`${message} from lib-b`)

packages/lib-b/package.json

{
  "name": "lib-b",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "scripts": {
    "build": "tsc ./src/index.ts --outDir ./dist --declaration"
  },
  "devDependencies": {
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "lib-a": "*"
  }
}

確認

$ npm run build

> lib-b@0.0.0 build
> tsc ./src/index.ts --outDir ./dist --declaration

$  node ./dist/index.js
HELLO WORLD! from lib-b

ここまでで、workspace の設定＆作成は完了。

TurboRepo

workspace 内のタスクを扱いやすくするための設定を行う。

$ npm i -D turbo

package.json

{
+  "devDependencies": {
+    "turbo": "^1.10.16"
+  },

設定ファイル追加

turbo.jsonを追加する。

turbo.json

{
    "$schema": "https://turbo.build/schema.json",
    "pipeline": {}
}

コマンドの追加

turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
+    "build": { }
  }
}

package.json

{
  "scripts": {
    "prepare": "git config --local core.hooksPath .githooks && echo Changed hooks directory when npm install",
+    "build": "turbo build"
  },
}

実行結果

$ npm run build

> kaminiten@0.0.1 build
> turbo build

• Packages in scope: lib-a, lib-b
• Running build in 2 packages
• Remote caching disabled
lib-a:build: cache miss, executing a95ca7f72440e4f7
lib-b:build: cache miss, executing ff4864de4082656c
lib-b:build:
lib-b:build: > lib-b@0.0.0 build
lib-b:build: > tsc ./src/index.ts --outDir ./dist --declaration
lib-b:build:
lib-a:build:
lib-a:build: > lib-a@0.0.0 build
lib-a:build: > tsc ./src/index.ts --outDir ./dist --declaration
lib-a:build:

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

package内のbuildが2つ実行されるが、順序が考慮されていない。

実行順序の記載

package.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": { 
+        "dependsOn": ["^build"]
    }
  }
}

$ npm run build

> kaminiten@0.0.1 build
> turbo build

• Packages in scope: lib-a, lib-b
• Running build in 2 packages
• Remote caching disabled
lib-a:build: cache hit (outputs already on disk), replaying logs a95ca7f72440e4f7
lib-a:build:
lib-a:build: > lib-a@0.0.0 build
lib-a:build: > tsc ./src/index.ts --outDir ./dist --declaration
lib-a:build:
lib-b:build: cache miss, executing ae64577917fd6274
lib-b:build: 
lib-b:build: > lib-b@0.0.0 build
lib-b:build: > tsc ./src/index.ts --outDir ./dist --declaration
lib-b:build:

 Tasks:    2 successful, 2 total
Cached:    1 cached, 2 total
  Time:    1.109s

順序を考慮したものになった。

参考

pnpm x Turborepo x lerna-lite x GitHub Packagesでmonorepoなオレオレ非公開ライブラリをつくってみる
もはや pnpm と Turborepo で Monorepo 環境作れるから