dependency-cruiserを紹介します @taiyama1212（株式会社iimon） 1 / 13

自己紹介 たいせい（株式会社iimon） Qiitaで毎月10個記事アウトプット中 SNS X(taiyama1212) Qiita(yamatai12) 好きなこと 抹茶ラテ 、旅行 2 / 13

概要 外部イベントでdependency-cruiserを紹介して頂きました。 「循環依存を検知」 「package privateな設計を守る」 このようなことを実現してくれるライブラリです！ 3 / 13

目次 dependency-cruiserとは 導入方法 検証の例 使い所 package private のような設計を作る 最後に 4 / 13

dependency-cruiserとは JavaScript、TypeScriptの依存関係を調べ次の2つのことをします。 カスタムのルールと照らし合わせて検証 テキスト、グラフィックででルール違反を報告 5 / 13

導入方法 # npm install --save-dev 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 Looks like you're using webpack - specify a webpack config? … yes Successfully created '.dependency-cruiser.js' 質問に答えるだけで設定ファイルを作成してくれます 6 / 13

検証の例 循環依存の検知 index.ts import { calc } from "./calc"; export const violation = "violation"; calc.ts import { violation } from "./index"; export const calc = "calc" これを検証すると。 。 7 / 13

# npx depcruise src error no-circular: src/calc.ts → src/index.ts → src/calc.ts ✘ 1 dependency violations (1 errors, 0 warnings). 2 modules, 2 dependencies cruised. エラーになりました！ 8 / 13

使い所 循環依存関係をgithub-actions上で検知 package private のような設計を作る 9 / 13

package private のような設計を作る module.exports = { forbidden: [ { name: `1. '_' から始まるディレクトリ内部のファイルは、同ディレクトリ内のファイルまたは、一つ上の階層のディレクトリのファイルからのみimport 可能`, severity: 'error', from: { path: ['(.*)\\/.*\\.ts'], pathNot: ['.*\\.spec\\.ts$'] }, to: { path: ['_\\w+\\/\\w+\\.ts$'], pathNot: ['$1\\/_\\w+\\/\\w+\\.ts$', '$1\\/\\w+\\.ts$'], }, }, { name: `2. '_' から始まるファイルは同階層に置かれたファイルからのみimport 可能`, severity: 'error', from: { path: ['(.*)\\/.*\\.ts$'], pathNot: ['.*\\.spec\\.ts$'] }, to: { path: ['.*\\/_\\w+.ts$'], pathNot: ['$1\\/_\\w+.ts$'], }, }, ] fromがimport(require)する側で、toがexportする側です。 pathがルールを適用するファイルパスで、pathNotが適用されないファイルパスです。 10 / 13

src/ ├── _package1/ │ ├── _package2/ │ │ ├── _private.ts │ │ └──calc.ts │ └── importer.ts ├── index.ts └── exporter.ts 11 / 13

最後に 循環依存の検知をしてくれるのは魅力的です。 また、pacakge privateな設計や、自分が作りたい設計、モジュール管理が心置き無くできる ようになります デメリットは「コマンドを実行しないと検知されない」ということです。 eslint-plugin-import-access, eslint-plugin-strict-dependenciesとの使い分けを考えていきたいです 12 / 13

私たちと一緒に働きませんか？ iimonではエンジニアを募集しています！ ありがとうございました！！ 13 / 13