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
今後の予定
あまり時間がとれないので、時間がある時に少しずつにはなりますが、
- 配置アルゴリズムの最適化
- ストアとコンポーネントの関係性の可視化
- PropsとEmitの詳細な関係表示
- パフォーマンス分析機能
といった前回からの機能に加え、
- VSCode拡張
- ファイルごとの詳細なStats
- junit系ツールへの対応
なども検討はしています。
おわりに
まだ開発初期段階ですが、より良いVue.jsの開発体験を提供できるよう、機能を充実させていきたいと考えています。
興味を持っていただけた方は、GitHubをチェックしていただけると嬉しいです。
また、フィードバックやコントリビューションも大歓迎です！
Discussion