はじめに

なんかこのコンポーネント誰に依存されているかわかんないの、変更した時不安(´；ω；｀)
って声があったので、コンポーネント間の依存関係を出すツールを調べて使ってみました。
結果かなり良かったです。

madge

DEMO

概要

madgeはtsconfigやwebpackの設定を与えて、何をさせるのか指定します。
例えば、依存グラフをsvgで出力させたり、vg形式で出力させたりできます。
また、循環依存があるファイルリスト、依存されているのが1つ以上あるリスト、逆にどれにも依存されていないリストを出したりできます。
cliで軽くやるのからnodeでフルコントロールもできるのでかなり細かい事ができ、例えばこのモジュールはここからしか依存させないなどの設定をCIやエディターに簡単に組み込ませたりできます。(例：クリーンアーキテクチャーが持つポリシーの1つである、レイヤーを通り越して依存するの禁止等が簡単に実現できます。

React

一応jsxはtypescriptが標準サポートしているので、jsx間の依存は簡単に見れる。

ちょっとボリュームのあるこのリポジトリの依存!
も出してみる。

見やすくてかなり良い感じだと思います！

Vue

https://github.com/pahen/madge/issues/122
vueファイル間の依存を出したかったんですが、それはまだできないっぽいです(´；ω；｀)

dependency-cruiser

dependency-cruiserは標準でvueの依存グラフを出せますし、madgeと同じように循環依存検知等色々できます。
また、出力はdot言語なので、dot言語のレイアウトエンジンを調整すればいろいろできます。

こちらのリポジトリをサンプルに依存グラフを出します。
https://github.com/kahirokunn/book-management

これがサンプルです

特定コンポーネント単位なら割といけますね。

ちなみにデフォルト設定で全部出すとめっちゃカオスです
叩いたコマンドはこれです

$ depcruise --webpack-config ./node_modules/@vue/cli-service/webpack.config --exclude "^node_modules" --output-type dot src | dot -T jpg > dependencygraph.jpg && open ./dependencygraph.jpg

レイアウトエンジンに関してはこちらの記事を見ていただきたいです
http://melborne.github.io/2013/04/02/graphviz-layouts/

デフォルトレイアウトエンジンはdotで、あまり見やすくないですね。。。
自分の好みはneatoです。
こんな感じになります。

まぁカオスには変わりないですが、まだまし、、、？なのかなって(´；ω；｀)

まとめ

現状の依存グラフのエコシステムだとこの辺までできるようです。
もしもっとこういうのもあってこうできるよ！とか、いろいろありましたら教えていただけると幸いです。

参考資料

https://qiita.com/rubytomato@github/items/51779135bc4b77c8c20d#edge
http://melborne.github.io/2013/04/02/graphviz-layouts