💿
Remix: Visualizing TypeScript Dependencies
依存関係について。
Rust / Go で依存関係を調べていた。
その中で、TypeScript の依存関係を可視化する方法について考えた。
dependency-cruiser というものがあるらしい。
これで、TypeScript の依存関係を可視化できる。
CI に組み込んでおけば、認知負荷を下げることができるかもしれない。
実際に作成した Project はこれ。
Installation
npm i -D dependency-cruiser
npx depcruise --init
Initialize
定義を作成する。
node ➜ /workspaces/my-portfolio-remix-v2 (main) $ npx depcruise --init
✔ It looks like this is an ESM package. Is that correct? … yes
✔ Where do your source files live? … app
✔ Do your test files live in a separate folder? … no
✔ Looks like you're using a 'tsconfig.json'. Use that? … yes
✔ Full path to your 'tsconfig.json › tsconfig.json
✔ Also regard TypeScript dependencies that exist only before compilation? … no
✔ Successfully created '.dependency-cruiser.cjs'
npm notice
npm notice New major version of npm available! 9.8.1 -> 10.2.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.4
npm notice Run npm install -g npm@10.2.4 to update!
npm notice
node ➜ /workspaces/my-portfolio-remix-v2 (main)
node ➜ /workspaces/my-portfolio-remix-v2 (main) $ npx depcruise --include-only "^app" --config .dependency-cruiser.cjs .
warn no-orphans: app/routes/portfolio._index.tsx
warn no-orphans: app/routes/_index.tsx
warn no-orphans: app/root.tsx
warn no-orphans: app/entry.server.tsx
warn no-orphans: app/entry.client.tsx
✘ 5 dependency violations (0 errors, 5 warnings). 15 modules, 5 dependencies cruised.
node ➜ /workspaces/my-portfolio-remix-v2 (main) $
Visualization
node ➜ /workspaces/my-portfolio-remix-v2 (main) $ npx depcruise --config -x "^(build|functions|node_modules|public)" .dependency-cruiser.cjs . --output-type mermaid > depcruise.md
markdown で表示させるため、コードブロックで mermaid を指定する。
+```mermaid
flowchart LR
0[".dependency-cruiser.cjs"]
1[".eslintrc.cjs"]
subgraph 2["app"]
subgraph 3["components"]
4["Footer.tsx"]
end
5["entry.client.tsx"]
6["entry.server.tsx"]
7["root.tsx"]
subgraph 8["routes"]
9["_index.tsx"]
A["portfolio._index.tsx"]
B["portfolio.articles.tsx"]
E["portfolio.certificates.tsx"]
G["portfolio.experience.tsx"]
I["portfolio.tsx"]
end
subgraph C["utils"]
D["articles.server.tsx"]
F["certificates.server.tsx"]
H["experience.server.tsx"]
end
J["index.css"]
K["types.ts"]
end
L["remix.config.js"]
M["remix.env.d.ts"]
N["server.ts"]
B-->D
E-->F
G-->H
I-->J
I-->4
+ ```
Open Preview
完成。
Discussion