2019.06.29

JavaScript/TypeScriptの依存関係を可視化


依存関係のグラフを画像で出力できるツール。
事前にGraphvizを導入しておくこと

https://github.com/pahen/madge

インストール

yarn global add madge

使い方

madge --extensions js,ts,tsx --ts-config ./tsconfig.json --image graph.svg ./src/index.tsx

プロジェクトのルートに.madgercファイルを作っておくと、
そこから設定を読み込んでくれる。

https://github.com/pahen/madge#configuration

{
  "fileExtensions": ["js", "ts", "tsx"],
  "tsConfig": "./tsconfig.json"
}

出力結果はこんな感じ。

graph