Use depcheck with GitHub Action to output results in GitHub Pull Request comments.

Introduction

Node Package Manager (npm), which is indispensable for developing systems with JavaScript and TypeScript, often has a problem with its large library size.

Of course, there have been a lot of discussions about node module's issue, and I don't want to say anything about it now.

I'm sure there are many ways to solve the above problem, but for webdev developers like me, the only thing we can do is to delete libraries that we don't use, so let's think of ways delete unuse libraries.

depcheck

depcheck is a tool to check how each library dependency is used, which dependencies are not used, and which dependencies are missing from package.json for your projects packaged with npm.

Using npx in the project root,

npx depcheck

You can easily get the results by running it.

For example, if you run it in this repository

> npx depcheck
npx: installed 120 in 12.136s

Unused dependencies
* @fortawesome/free-regular-svg-icons
* @fortawesome/free-solid-svg-icons
* react-error-overlay
* react-flickr-hero
* sharp
* tween
Unused devDependencies
* @storybook/addon-a11y
* @storybook/addon-controls
* @storybook/addon-docs
* @storybook/addon-essentials
* @storybook/addon-info
* @storybook/addon-knobs
* @storybook/addon-links
* @storybook/addon-storyshots
* @types/aws-lambda
* @types/jest
* @types/node
* @types/react-fontawesome
* @types/storybook__addon-info
* babel-preset-gatsby
* babel-preset-react-app
* greenkeeper-lockfile
* identity-obj-proxy
* netlify-cli
* netlify-lambda
* react-test-renderer
* stylelint-config-idiomatic-order
* stylelint-config-prettier
* stylelint-config-recommended
* stylelint-config-styled-components
* stylelint-processor-styled-components
* ts-dedent
* ts-jest
* tslint-react
Missing dependencies
* build-url: .\src\components\flickrHero.tsx
* @fortawesome/fontawesome-common-types: .\src\components\socialIcons.tsx
* axios: .\functions\src\contact.js
* @babel/preset-react: .\.storybook\main.js
* @babel/preset-env: .\.storybook\main.js
* @babel/plugin-proposal-class-properties: .\.storybook\main.js
* babel-plugin-remove-graphql-queries: .\.storybook\main.js

In this way, you can list libraries that are defined in package.json but not used in the code, or libraries that are found in the code but not defined in package.json.

I want to incorporate depcheck into GitHub Actions

After all, it would be nice if the depcheck runs automatically when you submit a PR.

And it would be even better if you could be notified of the results.

So, I created GitHub Actions.

https://github.com/marketplace/actions/depcheck-action-with-pr

It's easy to use. First, create a YAML file with a pull request as the trigger in your GitHub Actions.

The GitHub Token and the URL of the PR comment are required as input, and these can be obtained as environment variables in GitHub Actions.

Both can be obtained as environment variables in GitHub Actions.

• GITHUB_TOKEN
  • This can be gotten as secrets.GITHUB_TOKEN.
• PR_COMMENT_URL
  • This can be gotten from github.event.pull_request.comments_url for PR events.

on:
  pull_request:
    branches:
      - master

  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: 14.x
      - name: "depcheck"
        uses: tubone24/depcheck_action@v1.0.0
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          PR_COMMENT_URL: ${{ github.event.pull_request.comments_url }}

You just need to use it like this.

Then the result will be output as a PR comment.

At the time, there were no GitHub Actions in the marketplace that would output the results in a PR comment.

• The Unused dependencies section indicates that the libraries defined in package.json's dependencies are not used in the .js, .ts, .jsx, .tsx, .coffee, .sass, .scss, and .vue files.
• The Unused devDpendencies section indicates that the library defined in devDependencies in package.json is not present in each file.
• The Missing section indicates that the library used in your code is not present in package.json, possibly because you are using a library imported from CDN or a globally declared library.

The source code for this can be found at the link below, and is implemented using the Docker-launched version of GitHub Actions.

https://github.com/tubone24/depcheck_action