【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 <ディレクトリパス/..>
最後に
既存のコンポーネントがどこから呼ばれているのか？などを視覚的に把握できるためリファクタリングや修正の影響範囲を確認するときなどに役に立ちそうです。
Author And Source
この問題について(【Vue.js】Vue Componentの依存関係を可視化する方法), 我々は、より多くの情報をここで見つけました https://zenn.dev/katuo0011/articles/255fbbcc502c0f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol