madge, depcruise로 dependency 시각화하기

기존 프로젝트를 리팩토링 하기 전에, 각 파일들의 의존성이 어떻게 연결이 되어있는지 시각화를 하기 위해 방법을 찾아보았다.

 

특히 타입스크립트의 경우, dependency가 어떻게 되는지 시스템에서 정확하게 파악을 하고 있으므로 분명히 tool이 있을것이라고 확신하고 찾기 시작했다. 

 

우선 기록을 위해 여기 적어두고, 필요한 부분만 남기기로.

 

 

지금까지 입력한 명령어 모음

sudo npm -g install madge
비번입력, 설치
brew install graphviz 

yarn add -D dependency-cruiser 
yarn 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'


----
package.json
  "scripts": {
    "architecture": "depcruise --include-only \"^src\" --output-type dot src | dot -T svg > dependencygraph.svg",
    "graph": "madge --extensions ts,tsx --image graph.svg src/",
    "graph2": "madge --extensions tsx --image graph2.svg src/"
  },


----
yarn architecture
yarn graph
yarn graph2

 

 

 

https://github.com/pahen/madge

GitHub - pahen/madge: Create graphs from your CommonJS, AMD or ES6 module dependencies