きっかけ
IoT機器に載せるソフトウェア開発しているのだが、複数端末で資産流用できるようにしたいらしく、そのためにマイクロサービス化する必要があり、依存分断して構成変えられるように実施した。
その際、依存分断するのにかなり手間取ったから、依存分断するために使った方法をさらす。
準備
環境
OS
Microsoft Windows [Version 10.0.17134.165]
Node
v7.2.1
typescript
2.5.3
dependency-cruiser
4.3.1
インストール方法
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のヤツを使ってみる。
実行したコマンドは、下記の通り。
実行場所は、プロジェクトディレクトリ直下。
depcruise --exclude "^node_modules" --output-type dot src/ts/app.js | dot -T svg > dependencygraph.svg
そうすると、dependencygraph.svg
が出来上がる。
コマンド実行して、dotが見つからない的なことを言われたら、VSCodeでやっている場合は再起動してみるといいかも。
システム環境変数が反映されてないみたいなので、自分も最初迷ったが、再起動したら問題なく動いた。
app.js から依存しているものが見えるようになる。
使って見て
助かったのは、循環参照とか、かなり深い参照していた箇所。
最初は目で追っていたけど、無理だった。。。
あと、svgで出力すると、dom操作でフォーカス当てたクラスから派生するのに色つけたりできるので、いろいろ便利。
クラス数多いと、色つけると見やすい。
とりあえず、長年、どうやって依存を発見しようか悩んでいたが、これで少しは楽になった。