Kengo's blog

Technical articles about original projects, JVM, Static Analysis and TypeScript.

Drawing graph about dependency between AMD modules

Sometimes I want to know dependency between AMD modules graphically, because it might be helpful to understand complexity. Today I have tried to realize it.
AMDモジュール間の依存関係をおおまかに把握したい時って結構あります。規約どおりの依存関係になっているかどうか、多くのモジュールから依存されすぎていないか、予期せぬ依存が発生していないか。これを解決できるか試してみました。

I used blockdiag to draw graph about dependency.
なお依存関係の図示にはblockdiagを使用しました。

define時にモジュール名が明示されている場合

We can realize it very easy if each module has ID. I think we do not have to care about 'this' problem for AMD loading. The result is here.
すべてのdefine呼び出しにモジュール名が明示されているなら、非常に単純な実装で要求を満たせます。defineメソッド呼び出し時のthisを気にする必要もない(はず)なのでこれで充分でしょう。グラフはこちら

define時にモジュール名が明示されていない場合

If some module has no ID, we have to touch to the implementation of AMD loader because API of AMD does not provide enough API. Today I used RequireJS 2.1.
AMDのAPIだけではどうにもならないので、AMDローダの実装に依存した方法を採る必要が出てきます。今回はRequireJS 2.1を前提に実装を進めます。

RequireJS has a magic module to get information of module, so I used it to get URL of module. Test is not enough, but I guess it works.
RequireJSにはmoduleというmagic moduleが用意されているので、これを使ってやるだけです。モジュールを一意に特定する要素としてはURIを採用しました。テストはまだ足りないですが、ちょっと試した限りでは動いてそうです。

This script does not support require method and require magic module, but it is enough for me.
以上です。requireメソッドやrequire magic moduleには対応していませんが、個人的に困らないのでOKとしています。