打造自己的 React 設計系統分析工具
原文由 Alex O'Callaghan 于 發布，訂閱此部落格
像 Omlet 這類服務提供了一種方式，讓你了解 React 設計系統在各個專案中的使用情況。對於維護設計系統的團隊來說，這非常實用。不過，它的定價並不便宜，而且會依 React 元件數量計費。因此，我開始研究如何自行打造一套系統，在不需要額外花費的情況下也能獲得類似的洞察。
react-scanner
react-scanner 是一個 npm 套件，能對 React 應用程式進行靜態分析。它可以輸出 JSON，描述來自特定套件的元件在整個程式碼庫中的使用情形。
透過 @typescript-eslint/typescript-estree 與 astray，這個套件會建構並遍歷程式碼庫的抽象語法樹（AST）。它會找出從設計系統匯入的元件，以及使用了哪些 props。
建立 CLI
我將 react-scanner 包裝成一個 CLI，讓它能在每次發布時於專案的 CI 流程中執行：
#! /usr/bin/env node
import { Command } from "@commander-js/extra-typings";
const program = new Command().option(
"-d, --dir <path>",
"set project directory"
);
program.parse();
const options = program.opts();
const dir = path.resolve(options.dir) || cwd();
const scannerConfig = {
rootDir: dir,
crawlFrom: "./src",
includeSubComponents: true,
importedFrom: "your-design-system-package",
processors: [["raw-report", { outputTo: `${dir}/raw-report.json` }]],
};
await scanner.run(scannerConfig);相關的結構可以在 react-scanner 說明文件中找到。
我還想額外收集一些關於專案的資料，並將它們寫入一個獨立的專案資訊 JSON 檔中：
const pkg = JSON.parse(fs.readFileSync(`${dir}/package.json`, "utf8"));
// Create project info file
const projectInfo = {
name: pkg.name,
pkgVersion: pkg.dependencies["your-design-system-package"],
timestamp: new Date().getTime(),
url: process.env.CI_PROJECT_URL,
};
if (!projectInfo.pkgVersion) {
console.log(
"No design system package version found in package.json, exiting..."
);
process.exit();
}- name - 用來識別報告來源的專案名稱
- pkgVersion - 專案所使用的設計系統套件版本，用來了解各專案的更新程度
- timestamp - 報告產生的時間，用來判斷報告的新舊程度，並有助於觀察一段時間內的變化
- url - 專案的 URL，讓我們可以建立直接連到元件使用檔案的連結。我們使用 GitLab，而這個環境變數是在 GitLab CI 流程中設定的。
儲存與檢視資料
我決定採用一個簡單的靜態網站來呈現資料，就像我之前處理 DORA 指標時的做法一樣。
我為該專案設定了 GitLab 專案存取權杖，並使用 GitLab commits API 將資料推送到資料儲存庫的 main 分支。這會觸發網站的新版本發布，同時對原始報告與專案資訊 JSON 檔進行一些資料處理。
我們在前端專案中使用共用的 CI 範本，因此我能夠新增一個部署後的步驟，來掃描並推送其他團隊專案的資料。
目前的進展
現在，我們有了一個單一的位置，可以快速查看共用元件在各專案中的使用情形。這對工程師和設計師來說都很有用，能幫助他們推斷行為上的變更可能對專案造成什麼影響。
我很期待進一步探索如何利用這些資訊來引導我們的設計系統策略。隨著時間累積的設計系統採用率指標，能幫助我們了解如何更好地支援團隊。而能夠觀察到團隊何時開始或停止使用某個新元件，也讓我們有機會主動去了解背後的原因。
留言
登入後參與討論