madge で TypeScript 依存関係を可視化する

ヤバい感じで依存し合ってるコードがあったので、どのへんから手をつけたものか難しかったのでいったん見えるようにしてみた。

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

よかった

• svg で出力してくれるので画像を github に貼ったりとかすると具合がよい
• パスエイリアスにも対応してくれてて不足なくみられた

docker で実行したい

本筋とは関係ないが、Graphviz でいろんな依存が mac に入るのが嫌だったので docker run で実行している。

FROM node
RUN apt update
RUN apt-get install -y graphviz
RUN npm install -g madge
WORKDIR /home/app
ENTRYPOINT ["madge"]

$ docker build --tag madge .
$ docker run --rm -i \
    -v $(pwd):/home/app:rw madge \
    --webpack-config ./webpack.config.js \
    --ts-config ./tsconfig.json \
    --exclude 'test.tsx?' \
    --image /home/app/graph.svg \
    ./src/index.ts

ffmpeg

依存がたくさん入るのがイヤで、似たようなことを ffmpeg でもやっていた。

• ffmpeg の Docker イメージで動画をローカルの切ったり貼ったりする