上週試著用 Tailwind CSS 重新打造了網誌的主題，一開始使用的時候，覺得一直翻文件很煩，因為大部分的 CSS 規則大概都知道怎麼寫，卻得要翻文件才知道對應的 class；但寫了一段時間後，開始覺得還不錯，大部分的 class 都很容易預測，也很容易根據需求客製變數或外掛。
跟 Bootstrap 或 Semantic UI 這類 UI library 相比，Tailwind CSS 不提供現成的元件（另有提供須付費的 Tailwind UI），而是把每個 CSS 規則都寫成單獨的 class，因此即便完全不寫 CSS，只要在 HTML 中設定 class，也很容易能夠拼湊出想要的樣式，但缺點就是還是需要有基本的 CSS 知識才能上手。
今年初隨著公司的 repo 越來越多，我們決定把 web 前端部分轉為 monorepo 的形式，一開始花了一段時間研究各個 monorepo 方案的利弊，最後決定基於 Yarn 2 打造一套自用的工具。這篇文章會大概分析一些我試過的 monorepo 方案的優缺點，以及最後用 Yarn 2 的成果。
本篇接續上一篇文章，是我在 Dcard 開發的第二個 Kubernetes 工具。
目前敝社的開發流程基於 GitHub flow，大致上如上圖所示。要開發新的功能時，會從主要分支 master 開出新的功能分支 feature，功能開發完成後會提出 pull request，審核通過後就會合併進 master，並部署到 staging 伺服器上。
通常在審核 pull request 時，我們僅會檢視程式碼和附帶的測試，如果一切順利而且 CI 測試通過的話，就會直接合併進 master。然而在某些情況下，特別是以前端極少測試的狀況來說，只看程式碼有時無法看出問題所在，必須實際執行才能確保程式能夠正常運作，有時也可能需要 PM 確認程式符合 spec，或是讓設計師確認程式符合設計稿。
對於工程師來說，要把程式執行起來並不困難，但對於其他人來說，光是設定環境可能就是件讓人頭痛的事了。我們常用的方法是直接讓他們透過區網或 ngrok 連到工程師的電腦上，有時甚至為了上 staging 伺服器就直接合併進 master 了。讓還沒審核通過的程式碼進入 master 不僅可能造成 staging 伺服器的異常，也有可能會影響其他工程師的開發進度。
敝社從 2016 年就開始 Kubernetes，應該能算是相當早期的使用者了，也因此我們累積了一堆的 Kubernetes YAML 設定檔，從某個時間開始 staging 和 production 環境的設定檔更開始分裂，自此以來一直無法合併。因此這次的目標就是：
最近在開發公司內部使用的工具時，心血來潮想用 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 看到實際運用的範例。