在 README 中显示过期软件包依赖项数量的 Github Action

问题描述

想要在他的项目的 README 文件中添加一个徽章（badge），用于显示他的 package.json 文件中过期（out of date）依赖项的数量。他希望在运行 GitHub Action “Firebase CI” 时，徽章能够更新，以显示构建时的过期依赖项数量。徽章的样式如下图所示：

用户目前已经配置了一个 GitHub Action 来构建和部署他的 Create React App 到 Firebase Hosting。他的 package.json 文件内容如下：

{
  "name": "my-app",
  "version": "0.1.0",
  "start": "FAST_REFRESH=false react-scripts start",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "lint:fix": "eslint --fix --ext .ts,.tsx ."
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

解决方案

请注意以下操作可能因版本差异而有所变化，请在实施前做好备份。

步骤1：添加徽章到 README

要在 README 文件中显示过期依赖项的数量徽章，可以使用 Shields.io，一个提供各种徽章的服务。在你的项目 README 中添加以下 Markdown 代码：

![Out of Date Dependencies](https://img.shields.io/badge/dynamic/json?color=blue&label=Out%20of%20Date%20Dependencies&query=%24.dependencies.outdated&url=https%3A%2F%2Fraw.githubusercontent.com%2Fpath%2Fto%2Fyour%2Fpackage.json%2Fmain%2Fpackage.json)

将 https://raw.githubusercontent.com/path/to/your/package.json/main/package.json 替换为你实际项目的 package.json 文件的 Raw URL。

步骤2：使用 GitHub Action 更新徽章

在你的 GitHub Action 配置中（.github/workflows/your-action.yml），你可以添加一个步骤来更新徽章的数据。下面是一个更新徽章数据的示例步骤：

- name: Update Out of Date Dependencies Badge
  run: |
    DEPENDENCIES=$(curl -s https://raw.githubusercontent.com/path/to/your/package.json/main/package.json | jq '.dependencies | keys | length')
    sed -i "s/\"outdated\": .*/\"outdated\": $DEPENDENCIES,/" path/to/your/badge-data.json
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

在这个示例中，我们使用 curl 命令获取 package.json 文件的内容，然后使用 jq 工具解析 JSON 并获取过期依赖项的数量。最后，我们将这个数量更新到一个存储徽章数据的 JSON 文件中。

请确保将路径替换为你实际项目中徽章数据的路径。

步骤3：将徽章数据提交回仓库

在更新徽章数据后，需要将更改提交回仓库以触发 GitHub Action 的运行。在之前的步骤中，我们使用了 GitHub 的内置 secrets.GITHUB_TOKEN，因此不需要额外的配置。

通过执行以上步骤，你就可以实现在 README 中显示当前过期软件包依赖项数量的徽章，并通过 GitHub Action 在每次构建时更新该徽章的数据。

结论

通过使用 Shields.io 服务和 GitHub Action，你可以在 README 文件中显示过期软件包依赖项数量的徽章，并在每次构建时自动更新徽章的数据。这将使你的项目更具有信息量和可视化效果，帮助用户了解项目的依赖项状况。