エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

dependency-cruiser を使って依存関係分離をしたメモ

きっかけ

IoT機器に載せるソフトウェア開発しているのだが、複数端末で資産流用できるようにしたいらしく、そのためにマイクロサービス化する必要があり、依存分断して構成変えられるように実施した。

その際、依存分断するのにかなり手間取ったから、依存分断するために使った方法をさらす。

準備

環境

OS

Microsoft Windows [Version 10.0.17134.165]

Node

v7.2.1

typescript

2.5.3

dependency-cruiser

4.3.1

dependency-cruiser - npm

インストール方法

  • npm install --save-dev dependency-cruiser
  • npm install --global dependency-cruiser

どっちかでインストール。

graphviz

2.38

https://www.graphviz.org/download/

binフォルダを環境変数のPathに入れる。
windowsの話

\graphviz-2.38\release\bin

↑フルパスを入れればOK。

実行

本来はJS用のものなので、typescriptをjsに変換する。 自分は面倒くさいので、前回のbrowsifyのヤツを使ってみる。

suzaku-tec.hatenadiary.jp

実行したコマンドは、下記の通り。
実行場所は、プロジェクトディレクトリ直下。

depcruise --exclude "^node_modules" --output-type dot src/ts/app.js | dot -T svg > dependencygraph.svg

そうすると、dependencygraph.svg が出来上がる。

コマンド実行して、dotが見つからない的なことを言われたら、VSCodeでやっている場合は再起動してみるといいかも。
システム環境変数が反映されてないみたいなので、自分も最初迷ったが、再起動したら問題なく動いた。

app.js から依存しているものが見えるようになる。

使って見て

助かったのは、循環参照とか、かなり深い参照していた箇所。
最初は目で追っていたけど、無理だった。。。

あと、svgで出力すると、dom操作でフォーカス当てたクラスから派生するのに色つけたりできるので、いろいろ便利。
クラス数多いと、色つけると見やすい。

とりあえず、長年、どうやって依存を発見しようか悩んでいたが、これで少しは楽になった。