April 12, 2020

Using Dependency Cruiser with TypeScript and Webpack

I was getting lost in files in a project, and wanted to make sweet graphs with dependency cruiser to help me out.

This project uses webpack, and webpack uses TypeScript to transform .ts files, so the configration was a bit different from the samples in the docs. Here’s what didn’t work and worked for me.

Does not work

Does not work because yarn outputs some extra info by default (how long the command took to run) at the end of the process which breaks dot

SOME_ENV_VAR=value yarn depcruise --webpack-config config/webpack.config.js --include-only "^src" --output-type dot src | dot -T svg > dependencygraph.svg

Error:

Error: <stdin>: syntax error in line 1 near 'yarn'
Warning: syntax ambiguity - badly delimited number '.19.' in line 1 of <stdin> splits into two tokens

I switch to running this straight out the node_modules folder, without yarn

SOME_ENV_VAR=value ./node_modules/.bin/depcruise --webpack-config config/webpack.config.js --include-only "^src" --output-type dot src/index.tsx | dot -T svg > dependencygraph.svg

This ran, but felt extremely slow (10+ minutes). I tried two things to speed it up:

  1. cruise from the entrance point of the application rather than the whole src folder. There are tons of tests, storybook stories, and fixtures that I don’t care about diagraming.
  2. add the --max-depth flag to limit the amount of files checked and see if it gets me a result sooner

Does work

I eventually made an .svg file with this command:

SOME_ENV_VAR=value ./node_modules/.bin/depcruise --max-depth 1  --webpack-config config/webpack.config.js --include-only "^src" --output-type dot src/index.tsx | dot -T svg > dependencygraph.svg

I raised up the —max-depth to 2, then 4, then 8, and eventually removed it since the depth wasn’t the bottleneck.

SOME_ENV_VAR=value  ./node_modules/.bin/depcruise --webpack-config config/webpack.config.js --include-only "^src" --output-type dot src/index.tsx | dot -T svg > dependencygraph.svg

That generated a wild looking diagram. It turns out using --max-depth to limit the complexity of the diagram is more important my eyes/brain than my CPU and patience. Going forward, I’ll generate graphs of specific areas of the application that I’m interested in.