こんにちは、お読みいただきありがとうございます。 ケン(@gootablog)です。
仕事でVue.jsを書いています。jsを書くとimport
やrequire
でライブラリや自分で書いたモジュールを使う機会がありますよね。
自分が参加しているプロジェクトでインポートしたファイルの依存関係を調べたいということがありました。
そのときに同僚がMadgeという依存関係を視覚化できるライブラリを教えてくれました。とても便利だったので紹介します。
(インストールなどの方法はMacでのやり方です)
「Madge」とは?
https://www.npmjs.com/package/madge
JSの依存関係をリスト化したり、視覚化できるライブラリです。
インストールしてコマンドを実行するだけで出力することができます。
インストール
グローバルにインストールします。
$ npm -g install madge
もし依存関係を画像で出力したい場合は以下をbrew
コマンドでGraphviz
というライブラリをインストールします。
$ brew install graphviz || port install graphviz
基本はCLIのコマンドで操作
JSファイルに書いて実行してもできますが、基本はCLIコマンドで事足りるかと思います。
試しにa~dまでファイルを作り適当に依存関係を書いてコマンドを実行してみます。
$ madge a.js
そうするとa.js
というファイルからそれぞれのファイルがどう読み込まれているかリストで出力されます。
依存関係をCLIから画像出力する
リスト化ではなく画像で見たい場合は以下のコマンドを実行
$ madge --image dependencies.svg a.js
a.js
を起点とした依存関係をdependencies.svg
というファイル名で出力されます。
こんな感じ。依存関係が線で結ばれるのでどうつながってるかが一発でわかります。
視覚化できたら必要ない依存関係を解消していく
視覚化ができると必要ない箇所や改善できそうな箇所がわかるようになります。そうなったら地道に改善していくのみです。
業務でも同僚とこことここ同じモジュールをインポートしてるよねとか、ここはこうすればすっきりするしいいんじゃないなどの改善に向かえたのでよかったです。
参考になれば幸いです。