「雰囲気 tsconfig」からの脱却: pnpmモノレポ運用で学び直した Project Referencesの基礎と実践

pnpm workspacesなどのモノレポ環境で推奨される「Project References」。しかし実態として「とりあえず composite: true にして references を書けばいい」と、”おまじない”のように設定していませんか？

本トークは、現場のエンジニアが「なぜモノレポでProject Referencesが必要なのか？」をコンパイラの基礎的な挙動に立ち返った解説の実践の共有を主題します。

単一の巨大な tsconfig.json が引き起こす全ファイルASTパースから、パッケージ境界の .d.ts を活用した参照への変化、そして .tsbuildinfo を用いた差分ビルド（tsc -b）の仕組みを整理します。

コンパイラの気持ちを少し理解し、自信を持って tsconfig.json を設計・運用できるようになるための、明日から使える基礎知識をお届けします。

Transcript

1. 「雰囲気tsconfig」からの脱却： pnpmモノレポ運用で学び直した Project Referencesの基礎と実践 hedrall(小室 雅春)
2. 2 自己紹介 小室 雅春 X: @_hedrall 趣味 園芸 / 菜園(畑) 🌵 • RightTouchのプロダクトエンジニア ◦ exp) 朝日新聞社、カケハシ ◦ 2016年からTSで開発 • 新規プロダクト開発 • RightTouchのmonorepoの立ち上げ
3. 3 自己紹介 小室 雅春 X: @_hedrall • RightTouchのプロダクトエンジニア ◦ exp) 朝日新聞社、カケハシ ◦ 2016年からTSで開発 • 新規プロダクト開発 • RightTouchのmonorepoの立ち上げ スイカ取れたよ！ 趣味 園芸 / 菜園(畑) 🌵
6. 6 混乱の元凶 依存っぽいものが色々ある ...
7. • Project Reference は tscコンパイルの境界 を定義する ◦ tsc コンパイラにわたす依存グラフの地図 7 結論 • 小〜中規模では無理に導入しなくてもよいが、大規 模 monorepo だと一考の価値 あり
8. 8 依存の整理 “@org/util”: “workspace:^”
9. 9 依存の整理
10. 1 0 依存の整理
11. 1 1 依存の整理 tsc コンパイル時に、 関連するすべてのソースコードを読み込む
12. 1 2 依存の整理 TypeScript Projectの境界を定義する
13. 1 3 基本 • reference先は composit: true が必要 ◦ .d.ts, .tsbuildinfo の出力を約束する • tsc –build (-b) で実行すると、reference先を先にビ ルドする ◦ コードの変更を検知して、増分ビルド する
15. 1 5 TURBOREPO
16. 1 6 設計思想 管理主体をどちらが持つか？
17. 1 7 論理的な境界
18. 1 8 論理的な境界 root/ ├── tsconfig.json (solution) ├── src/ │ └── converter.ts ├── test/ │ └── converter.test.ts └── dist/ tsconfig.app.json tsconfig.test.json 🙅
19. 1 9 論理的な境界 root/ ├── tsconfig.json (solution) ├── src/ │ └── converter.ts ├── test/ │ └── converter.test.ts └── dist/ tsconfig.app.json tsconfig.test.json 🙅 src, test で参照可能範囲を分離できる
20. 2 0 メリット • TypeScript Project の 論理的な境界 を設定できる ◦ src, testを分離するなど (TS6059) ◦ TypeScript Project 毎に別のビルド設定を適用できる • 増分ビルド が高速化する ◦ leaf node change: 18.60 => 4.58 (−75.4%) ▪ ※ cold buildの時間は微増 ◦ dist, .tsbuildinfoを共有することで、turboキャッシュも可能 副次的に.. • Project 間の循環参照を検知できる (ビルドグラフはDAG) ※ 以下はトレードオフ • .d.ts 増加 • emit 増加 • file count 増加
21. 2 1 結論 爆発的に成長し続けるコードベースで、 Projectの境界を適切に設計していきましょう！