はじめに

JavaScriptの結合処理を行おうとすると、依存関係に悩まされていました。
https://qiita.com/taka-vagyok/items/db2684fd1545853dfe2e

それらは、grunt-file-dependenciesを使えば解決できると見込み、
かつ、定義部分と利用部分をコード上から解析するため、次のような設定を追加しました。

gruntfile.js

 file_dependencies: {
      ...: {
        options: {
          extractDefinesRegex: /(?!:["'])(PRJ(?:[\.][a-zA-Z]+)*)(?:\s*=)/g,
          extractRequiresRegex: /(?!:["'])(PRJ(?:[\.][a-zA-Z]+)*)(?:\s*^=)/g,
        }

しかし、そう簡単にはいかないもので、２つの問題が発生しました。

同じファイルが、定義と要求に追加され循環参照エラー
循環参照エラーの詳細が不明
- どの定義情報が問題なのかを提示してくれない
- 循環参照エラーのファイルを参照するファイルもエラーとして表示される

そこで、循環参照エラーの本丸を見つけるため、プラグインを改造して上記問題を解決しつつ、
参照関係を視覚化することにしました。

grunt-file-dependencies の改造

プラグインの改造のポイントは４つです。

定義と要求が同じ場合に無視する
循環が発生しているファイルだけに絞り込めること
循環が発生している定義を絞り込めること
上記を満たしつつ視覚化できること

上３つは、プラグインの一部の関数を変更、下１つは、dotファイルを作成する仕組みを
組み込んでみることにしました（dotファイルはGraphvizで画像化できる）。
https://github.com/taka-vagyok/grunt-file-dependencies
※ 詳細は上のforkを参照してください。

視覚化した画像はどうなったかというと、以下のような感じになります。

※ Graphvizのインストール＆パス追加と、VSCodeにGraphviz Previewというプラグインをインストールしました。

2018/9/4現在、cyclemap.dot というファイル名固定で作っているため、Pullしてもらう品質ではなく、
node_modules\grunt-file-dependencies\tasks\file_dependencies.js
を手動で置き換える必要があります。が、結構使えるツールになったとおもいます。

TODO

追加したオプションは勝手につけくわえたものなので、optionで切り替えができることと、
DRYの法則に反しているので、より良い修正方法に切り替える必要がありますが、
ひとまず、使えるようになったのでメモとして残しておきます。

同一ファイルのスキップ
dot ファイルの出力の有無
dot ファイルの名称

とても良いプラグインなので、これらができたら、取り込んでもらいたいなーと思っています。

フロントエンド初心者がgrunt-file-dependenciesを改造してみた

はじめに

grunt-file-dependencies の改造

TODO