とある都合でNext.jsの各pageでimportしているtsxファイルを一覧で抽出したかったので、同僚に教えてもらったdependency-cruiserを使ってみました。
CLIでは割とすぐ行けたのですが、APIではあれれ？とハマったので記事にしてみました。
インストール
dependency-cruiserのGithubを見るとサクッと入れられます。
--initオプションで設定ファイルも簡単に出力してくれました。
> pnpm install -d dependency-cruiser
> npx depcruise --init
✔ Where do your source files live? … src
✔ Do your test files live in a separate folder? … no
✔ Looks like you're using a 'tsconfig.json'. Use that? … yes
✔ Full path to your 'tsconfig.json › tsconfig.json
✔ Also regard TypeScript dependencies that exist only before compilation? … yes
✔ Successfully created '.dependency-cruiser.js'
CLIで出力してみる
ためしにCLIで出力をしてみました。
Githubの手順に従ってdotを使用して出力をしてみます。dot言語というもので依存関係を出力し、GraphViz dotを使用して可視化してみます。
brew install graphviz
npx depcruise src/app/page.tsx --include-only "^src" --output-type dot | dot -T svg > dependency-graph.svg
以下のように出力できました。（例のために今回は簡単なサンプルで出力しています）
-
--include-only- 特定のフォルダ配下のみを対象とするオプション
- これがないと例えば"node_modules"フォルダなど、実行したディレクトリ配下の依存関係を全て出力してくれます
-
--output-type- 依存関係等をどのように出力するかのオプション
-
textなども指定できます - 何もしないと、バリデーション結果だけが出力されます
ただ、このままだとhooksのtsファイルも出力されてしまいます。今回はtsxファイルだけを取り出したかったのと、グラフではなく、ファイル一覧が出力したかったのでAPIを使用してみることにしました。
APIを使ってみる
show-dependency-tsx.tsのようなファイルを作って実行できるようにします。
show-dependency-tsx.ts
import { cruise } from 'dependency-cruiser'
import ruleSet from './.dependency-cruiser' // tsファイルで読み込みたかったので、.dependency-cruiserファイルもtsに変更しました
const startFile = 'src/app/page.tsx'
const { output } = await cruise(
[startFile],
{
includeOnly: ['^src'],
ruleSet, // ここ重要！作成した設定ファイルを読み込まないと情報が出てこない
},
)
if (typeof output === 'string') {
console.error(output)
process.exit(1)
}
const tsxFiles = output.modules
.filter((module) => module.source.endsWith('.tsx'))
.map((module) => module.source)
console.log('tsx files:')
tsxFiles.forEach((file) => console.log(file))
tsxを使って実行します
> npx tsx show-dependency-tsx.ts
Used TSX files:
src/app/page.tsx
src/components/ChildComponent.tsx
src/components/descendants/DescendantCompoent.tsx
これでgraphを使用せず、一覧を取得できるようになりました🎉