pnpm の workspace を使ってみた

🙋 はじめに

私はこれまでモノレポのプロダクトに携わったことがなく、モノレポ構成のイメージが持てずにいました。 そこで、試しに自分でもモノレポ構成のリポジトリを作ってみようと思い、実際に試してみたので備忘録として残します。

🔥 実際に試してみる

今回、モノレポ構成の練習台に選ばれたのは Zenn の記事を管理しているリポジトリです。

zenn-contents/package.json at main · splendente/zenn-contents

:bookmark: Manage zenn articles. Contribute to splendente/zenn-contents development by creating an account on GitHub.

https://github.com/splendente/zenn-contents/blob/main/package.json

私はリポジトリの中に Zenn の記事だけでなく、記事の中で扱ったサンプルコードを examples ディレクトリの中で管理しています。

具体的なディレクトリ構成は以下のとおりです。

/zenn-contents
├─ articles
│  └─ xxxx.md
├─ books
│  └─ xxxx.md
├─ examples
│  ├─ sampleA
│  │  ├─ package.json
│  │  └─ pnpm-lock.yaml
│  └─ sampleB
│     ├─ package.json
│     └─ pnpm-lock.yaml
├─ package.json
└─ pnpm-lock.yaml

この時、sampleA や sampleB の node_modules はルートディレクトリで pnpm install 等を実行しても作成されません。

ここで pnpm workspace の登場です。

pnpm-workspace.yaml をルートディレクトリに作成します。

内容は以下のように記述しました。

packages:
  - examples/**

最後に package.json を修正し、ルートディレクトリに配置されている package.json によって実行されるスクリプトで examples ディレクトリ配下の各プロジェクトを起動できるようにします。

"scripts": {
  ...省略
  "examples:sampleA:dev": "pnpm run --filter=./examples/sampleA dev",
  "examples:sampleB:dev": "pnpm run --filter=./examples/sampleB dev"
},

--filter は -F という省略形もあるようです。

✅ まとめ

手軽に pnpm の workspace を導入することができました。

個人的にはルートディレクトリでサブディレクトリのスクリプトを実行することができるという点が非常に良いと感じました。