最近在開發公司內部使用的工具時，心血來潮想用 Lerna 來管理 monorepo，但是又想用 TypeScript，結果碰到了一些編譯上的問題，例如套件之間互相依賴時，TypeScript 不知道依賴關係而無法了解編譯順序，導致整個 monorepo 無法編譯成功。

之後發現了 Quramy/lerna-yarn-workspaces-example 這個範例，裡頭用了 Yarn、Lerna 和 TypeScript，在這之中 Yarn 並不是必須的可以忽視，重點是在 TypeScript 3.0 推出的 Project References，這個功能讓 TypeScript 能夠知道各個模組之間的依賴關係，因此自動解決了編譯順序的問題。

要使用 Project References 的話必須在 tsconfig.json 加上下列選項。

{  "compilerOptions": {    "composite": true,    "declaration": true,    "rootDir": "src",    "outDir": "dist"  }}

• composite - 讓 TypeScript 能夠快速找到被引用專案的位置。
• declaration - 編譯定義檔 (.d.ts)。
• rootDir - 設定專案的根目錄，預設是 tsconfig.json 的所屬資料夾。
• outDir - 編譯的輸出路徑。

並在要引用的地方加上 references。

{  "references": [    { "path": "../x-core" }  ]}

然後在執行 tsc 時加上 -b 選項以及要編譯的專案路徑，就能順利編譯。

tsc -b packages/x-core packages/x-cli

因為專案比較多，所以我另外寫了一個 script 自動找出所有需要編譯的專案路徑。

"use strict";const spawn = require("cross-spawn");const globby = require("globby");const { dirname } = require("path");const TSC = "tsc";const pkgs = globby.sync("packages/*/tsconfig.json").map(dirname);const args = ["-b", ...pkgs, ...process.argv.slice(2)];console.log(TSC, ...args);spawn.sync(TSC, args, {  stdio: "inherit"});

執行 tsc 時加上 --watch 就能夠監看檔案變化並自動重新編譯。

tsc -b packages/x-core packages/x-cli --watch

執行 tsc 時加上 --clean 則是能夠自動根據 outDir 設定清除編譯後的檔案。

tsc -b packages/x-core packages/x-cli --clean

可以在 tommy351/kosko 看到實際運用的範例。