Madge → JavaScript(CommonJS, AMD, ES6)コードのモジュール依存関係をグラフィカルに表示してくれるツール

MadgeというJavaScript(CommonJS, AMD, ES6)コードのモジュール依存関係をグラフィカルに表示してくれるツールを見つけたので備忘録。
依存関係が視覚的にわかるので便利。
それなりにスターがついているが、日本語での紹介記事が見当たらない。

graphvizは別個インストールしておく。
→CentOS7でgraphvizをインストールする
グローバルインストールする

$ npm -g install madge

あとはjsファイルにコマンドを入力するだけ。

List dependencies from a single file
$ madge path/src/app.js
List dependencies from multiple files
$ madge path/src/foo.js path/src/bar.js
List dependencies from all *.js files found in a directory
$ madge path/src
List dependencies from multiple directories
$ madge path/src/foo path/src/bar
List dependencies from all *.js and *.jsx files found in a directory
$ madge --extensions js,jsx path/src
Finding circular dependencies
$ madge --circular path/src/app.js
Show modules that depends on a given module
$ madge --depends wheels.js path/src/app.js
Excluding modules
$ madge --exclude '^(foo|bar)\.js$' path/src/app.js
Save graph as a SVG image (graphviz required)
$ madge --image graph.svg path/src/app.js
Save graph as a DOT file for further processing (graphviz required)
$ madge --dot path/src/app.js > graph.gv
Using pipe to transform tree (this example will uppercase all paths)
$ madge --json path/src/app.js | tr '[a-z]' '[A-Z]' | madge --stdin

–image graph.pngにすればpngファイルでも保存可能。graphviz次第。

試しにclapprの依存関係を視覚化。

$ git clone https://github.com/pahen/madge
$ cd madge
$ madge --image graph.png bin/cli.js

ここまで大きいソフトだとやはり画像も大きい。