「雰囲気tsconfig」からの脱却： pnpmモノレポ運用で学び直した Project Referencesの基礎と実践 hedrall(小室 雅春) 

2 自己紹介 小室 雅春 X: @_hedrall 趣味 園芸 / 菜園(畑) 🌵 ● RightTouchのプロダクトエンジニア ○ exp) 朝日新聞社、カケハシ ○ 2016年からTSで開発 ● 新規プロダクト開発 ● RightTouchのmonorepoの立ち上げ 

3 自己紹介 小室 雅春 X: @_hedrall ● RightTouchのプロダクトエンジニア ○ exp) 朝日新聞社、カケハシ ○ 2016年からTSで開発 ● 新規プロダクト開発 ● RightTouchのmonorepoの立ち上げ スイカ取れたよ！ 趣味 園芸 / 菜園(畑) 🌵 

No content

No content

6 混乱の元凶 依存っぽいものが色々ある ... 

● Project Reference は tscコンパイルの境界 を定義する ○ tsc コンパイラにわたす依存グラフの地図 7 結論 ● 小〜中規模では無理に導入しなくてもよいが、大規 模 monorepo だと一考の価値 あり 

8 依存の整理 “@org/util”: “workspace:^” 

9 依存の整理 

1 0 依存の整理 

1 1 依存の整理 tsc コンパイル時に、 関連するすべてのソースコードを読み込む 

1 2 依存の整理 TypeScript Projectの境界を定義する 

1 3 基本 ● reference先は composit: true が必要 ○ .d.ts, .tsbuildinfo の出力を約束する ● tsc –build (-b) で実行すると、reference先を先にビ ルドする ○ コードの変更を検知して、増分ビルド する 

No content

1 5 TURBOREPO 

1 6 設計思想 管理主体をどちらが持つか？ 

1 7 論理的な境界 

1 8 論理的な境界 root/ ├── tsconfig.json (solution) ├── src/ │ └── converter.ts ├── test/ │ └── converter.test.ts └── dist/ tsconfig.app.json tsconfig.test.json 🙅 

1 9 論理的な境界 root/ ├── tsconfig.json (solution) ├── src/ │ └── converter.ts ├── test/ │ └── converter.test.ts └── dist/ tsconfig.app.json tsconfig.test.json 🙅 src, test で参照可能範囲を分離できる 

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 増加 

2 1 結論 爆発的に成長し続けるコードベースで、 Projectの境界を適切に設計していきましょう！ 

No content