【Vue.js】Vue Componentの依存関係を可視化する方法

この記事について

Vueコンポーネントの依存関係を可視化する方法はないのかなと探していたときに良い感じのnpmパッケージを発見したのでシェアします。

Madge

Madgeというnpmパッケージを使うことでモジュール間の依存関係を可視化することができます。

Madge is a developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and give you other useful info. Joel Kemp's awesome dependency-tree is used for extracting the dependency tree.

画像は公式ドキュメントのものですが、このように矢印とファイル名でJSファイルの依存関係を出力することができます。

インストール

$ npm -g install madge

// svgでデータを吐き出すためにインストール必須
$ brew install graphviz

使い方

公式のREADMEに詳しい使い方が書いてありますが、手っ取り早く使いたい場合は次のコマンドを実行すれば良いです。

$ madge --image graph.svg --extensions js,jsx,ts <ディレクトリパス/..>

最後に

既存のコンポーネントがどこから呼ばれているのか？などを視覚的に把握できるためリファクタリングや修正の影響範囲を確認するときなどに役に立ちそうです。