Vue.jsコンポーネントの依存関係を可視化する「Voyager」を暫定公開しました
約半年ぐらい前にVoyagerというツールの開発を始めたことを書きました。
全然進められていなかったんですが、少しだけ時間ができたので暫定的に公開しました、という紹介です。
Voyager
改めてVoyagerについて紹介すると、Vueのコンポーネントの依存関係を簡単に可視化するためのツールです。
インストール
インストールはすごく簡単で npm install -g @voyager-vue/cli でインストールすることができます。
GitHubのREADMEを読んでもらえるといいかもしれません。
機能
現時点の機能としては3つしかありません。
どれも完成度は低いのであまり期待しないでください。
graph（HTMLで可視化）
Vueコンポーネントの依存関係をインタラクティブなHTMLとして可視化する機能です。 単一HTMLを出力するので、CIのアーティファクトで保存した結果などを確認することも可能です。
deps（依存関係の表示）
Terminal上で特定ファイルの依存関係をツリー形式で表示する機能です。 どのファイルをインポートしているか、どのファイルからインポートされているかを確認可能することができ、影響範囲を特定することができます。
$ voyager deps vue-element-admin -t src/components/Breadcrumb/index.vue
index.vue
├── imports (1):
│ └── path-to-regexp
└── imported by (1):
└── src/layout/components/Navbar.vue
stats（統計情報の表示）
プロジェクト全体の統計情報（ファイル数、循環参照、孤立コンポーネント、最も多くインポートされているファイルなど）を表示する機能です。
現状だとあまり意味のない数値も混じっているので、今後アップデートで強化予定です。
$ voyager stats vue-element-admin 📊 Component Statistics Files: Total files: 210 Vue components: 131 Script files: 82 Type definitions: 0 Dependencies: Total imports: 195 Circular dependencies: 0 Orphaned components: 93 Most imported files: src/api/article.js - 11 imports src/utils/index.js - 8 imports src/store/index.js - 7 imports src/api/qiniu.js - 6 imports src/utils/request.js - 6 imports src/utils/validate.js - 6 imports src/layout/index.vue - 5 imports src/components/PanThumb/index.vue - 5 imports src/router/index.js - 4 imports src/views/dashboard/admin/components/mixins/resize.js - 4 imports
今後の予定
あまり時間がとれないので、時間がある時に少しずつにはなりますが、
といった前回からの機能に加え、
なども検討はしています。
おわりに
まだ開発初期段階ですが、より良いVue.jsの開発体験を提供できるよう、機能を充実させていきたいと考えています。
興味を持っていただけた方は、GitHubをチェックしていただけると嬉しいです。 また、フィードバックやコントリビューションも大歓迎です！
