Upgrade to Pro — share decks privately, control downloads, hide ads and more …

dependency-cruiserを紹介します/dependency-cruiser-des...

 dependency-cruiserを紹介します/dependency-cruiser-description

外部イベントでdependency-cruiserを紹介して頂きました。
https://anotherworks.connpass.com/event/294517/

「循環依存を検知」

「package privateな設計を守る」

このようなことを実現してくれるライブラリです!

本スライドの原案は以下です!
https://qiita.com/yamatai12/items/fce4104e273981f78807

山根大生

May 21, 2024
Tweet

More Decks by 山根大生

Other Decks in Technology

Transcript

  1. 導入方法 # 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
  2. 検証の例 循環依存の検知 index.ts import { calc } from "./calc"; export

    const violation = "violation"; calc.ts import { violation } from "./index"; export const calc = "calc" これを検証すると。 。 7 / 13
  3. # 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
  4. 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
  5. src/ ├── _package1/ │ ├── _package2/ │ │ ├── _private.ts

    │ │ └──calc.ts │ └── importer.ts ├── index.ts └── exporter.ts 11 / 13