Vue.js + TypeScriptのプロジェクトで循環参照などの問題のあるファイルを検知する

最近、個人開発ではVue.js + TypeScriptをちまちまと書いています。

フロントエンドをがっつり書いていると、開発によってファイル数が増えていくとともに、依存関係や宙ぶらりんなモジュールができたりと言ったことが起きてしまう場合があります。

そこで、そうした依存関係等の問題を検知してくれるツールを調べてみました。

JavaScript、TypeScript周りの依存関係のチェックツール

JavaScript、TypeScript周りの依存関係のチェックツールは、調べた感じでいうと、madge と dependency-cruiser が良さそうでした。

github.com

github.com

madge、dependency-cruiser どちらも、依存関係の検知や依存関係の可視化ができます。

ただ、madge は Vue.js の Single File Component に対応していないため、Vue.js のプロジェクトでは使えないようです。

そのため、dependency-cruiser を使ってみたいと思います。

dependency-cruiser で問題のあるモジュールを検知する

まずは開発用に dependency-cruiser を追加します。

$ yarn add -D dependency-cruiser

次に、設定ファイルを生成します。いくつか確認が出てくるので、それに答えていきます。

$ npx depcruise --init

? Where do your source files live? bin,src
? Do your test files live in a separate folder?
? Looks like you're using TypeScript. Use a 'tsconfig.json'?
? Full path to your 'tsconfig.json': tsconfig.json
? Also regard TypeScript dependencies that exist only before compilation?
? Looks like you're using webpack - specify a webpack config?
? Full path to your webpack config: webpack.config.js

  ✔ Successfully created '.dependency-cruiser.js'

これで、 .dependency-cruiser.js が生成されます。各チェック項目に対する設定はこのファイルで行うことができます。

この時点でとりあえず実行することができます。

npx depcruise -v .dependency-cruiser.js .

  warn no-orphans: vue.config.js
  warn no-circular: src/main/js/modules.ts →
      src/main/js/app.ts →
      src/main/js/modules.ts

✖ 2 dependency violations (0 errors, 2 warnings). 97 modules, 225 dependencies cruised.

✨  Done in 2.90s.

今回はサンプル的にモジュールの循環参照を作ってみましたが、複数ファイルを経由して循環参照している場合でも検知してくれます。

また、 no-orphans に関しては、孤立したファイルのチェックです。使われなくなったモジュールのチェックなどに有効ですが、設定ファイルなどでは、警告が不要な場合もあります。

その場合は、 .dependency-cruiser.js の以下の pathNot に正規表現で対象外のファイルを追加しましょう。正規表現なので、拡張子の前の . などはエスケープが必要な点に注意してください。

{
      name: 'no-orphans',
      comment:
        ...
      severity: 'warn',
      from: {
        orphan: true,
        pathNot: [
          ...  // <== ここに追加する
        ]
      },
      to: {},
    },

まとめ

今回は、Vue.js + TypeScriptのプロジェクトで循環参照などの問題を検知できるツールについて、調べてみました。

dependency-cruiser であれば、初期設定さえできれば比較的簡単に準備ができるので、CI等に入れてしまっても良さそうですね。