Lighthouse Check Action 项目使用教程

Lighthouse Check Action 项目使用教程

lighthouse-check-action GitHub Action for running @GoogleChromeLabs Lighthouse audits with all the bells and whistles 🔔 Multiple audits, Slack notifications, and more! 项目地址: https://gitcode.com/gh_mirrors/li/lighthouse-check-action

1. 项目目录结构及介绍

Lighthouse Check Action 是一个 GitHub Action，用于在持续集成 (CI) 工作流程中自动运行 Lighthouse 审计。以下是项目的目录结构及各部分功能的简要介绍：

.lighthouse-check-action/
├── .github/                  # GitHub 工作流配置文件
├── dist/                     # 打包后的 JavaScript 文件
├── node_modules/             # 项目依赖
├── src/                      # 源代码
│   ├── index.ts              # 主入口文件
│   ├── ...
├── .eslintrc.json            # ESLint 配置文件
├── .gitignore                # Git 忽略文件
├── .prettierignore           # Prettier 忽略文件
├── .prettierrc               # Prettier 配置文件
├── LICENSE                   # 项目许可证
├── README.md                 # 项目说明文件
├── action.yml                # GitHub Action 配置文件
├── jest.config.js            # Jest 配置文件
├── package-lock.json         # 包版本锁定文件
├── package.json              # 项目包文件
├── tsconfig.json             # TypeScript 配置文件
└── tsconfig.release.json     # TypeScript 发布配置文件

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它是整个 Lighthouse Check Action 的入口点。这个文件负责初始化和配置 GitHub Action，以及调用 Lighthouse 审计功能。

// src/index.ts

// 引入必要的模块和依赖
import { Octokit } from '@octokit/rest';

// 主函数，用于执行 Lighthouse 审计
export async function run(): Promise<void> {
    // 初始化 Octokit 客户端
    const octokit = new Octokit({});

    // 获取输入参数
    const urls = core.getInput('urls');

    // 执行 Lighthouse 审计
    // ...

    // 根据 Lighthouse 审计结果进行相应的操作
    // ...
}

3. 项目的配置文件介绍

项目的配置文件包括以下几个：

• .eslintrc.json：ESLint 配置文件，用于定义代码风格和错误检查规则。
• .prettierrc：Prettier 配置文件，用于定义代码格式化规则。
• tsconfig.json：TypeScript 配置文件，用于定义 TypeScript 编译选项。
• jest.config.js：Jest 配置文件，用于定义单元测试配置。

这些配置文件确保了代码的一致性和项目的可维护性。具体配置内容如下：

// .eslintrc.json

{
  "extends": ["eslint:recommended"],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    // 更多规则...
  }
}

// .prettierrc

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": false,
  "printWidth": 80,
  "tabWidth": 2
}

// tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    // 更多选项...
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

// jest.config.js

module.exports = {
  "testEnvironment": "node",
  "testMatch": ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(spec|test).ts?(x)"]
};

以上是 Lighthouse Check Action 的项目使用教程，希望能够帮助您更好地理解和使用这个项目。

lighthouse-check-action GitHub Action for running @GoogleChromeLabs Lighthouse audits with all the bells and whistles 🔔 Multiple audits, Slack notifications, and more! 项目地址: https://gitcode.com/gh_mirrors/li/lighthouse-check-action