誰？ 2024-08 時点

💣 背景・課題

コンポーネント増えまくってつらくなってきた 🤮

※ 1 module に 30 ~ 80 ファイルくらい

※ Vue3, TypeScript, Jest

見づらいということは…

✨ グラフの生成 (npm - dependency-cruiser)

dependency-cruiser ﾃﾞｨﾍﾟﾝﾃﾞﾝｼｰｸﾙｰｻﾞ https://npmjs.com/dependency-cruiser

🔬 早速使ってみる (導入 1/3)

npm i dependency-cruiser -D
# 今回は自社のホームページのリポジトリで試す

🔬 早速使ってみる (導入 2/3)

> npx depcruise --init
✔ It looks like this is an ESM package. Is that correct? … no
✔ 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

  ✔ Successfully created '.dependency-cruiser.cjs'
            

🔬 早速使ってみる (導入 3/3)

npx depcruise --include-only '^src' --exclude '^node_modules' --output-type dot src | dot -T svg > ./dist/dependency-graph.svg
# graphviz が必要なのでなければ brew install graphviz (for macOS)
            

🎉

📕 README.md に載るようにして GitHub で閲覧

🤖 GitHub Actions

name: publish.yml

on:
  pull_request:
    branches: [main]
    types: [closed]

permissions:
  contents: write

jobs:
  publish:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [ubuntu-latest]
        node: ['20.x']
    if: github.event.pull_request.merged == true

    steps:
      - name: Checkout 🛎
        uses: actions/checkout@v4

      - name: Setup node env 🏗
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node }}
          check-latest: true

      - name: Get npm cache directory
          id: npm-cache-dir
          shell: bash
          run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}

      - name: Cache node_modules 📦
          uses: actions/cache@v4
          id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
          with:
            path: ${{ steps.npm-cache-dir.outputs.dir }}
            key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
            restore-keys: |
              ${{ runner.os }}-node-

      - name: Install dependencies 👨🏻‍💻
        run: npm ci

      - run: npm run build

      - name: Install Graphviz
        run: sudo apt install -y graphviz

      - name: Generate dependency graph 🎨
        run: npx depcruise --include-only '^src' --exclude '^node_modules' --output-type dot src | dot -T svg > ./dist/dependency-graph.svg

      - name: Deploy to GitHub Pages 🚀
          uses: peaceiris/actions-gh-pages@v3
          with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./dist
            

main にマージされたらグラフも作っていただく 🎨

🖊 README.md

追記

## dependency-graph

<!-- GitHub Actions で作ったグラフを表示する -->
![dependency-graph](https://github.com/nightlamp-llc/nl-homepage-v3/blob/gh-pages/dependency-graph.svg?raw=true)
            

✨ 今後