开源项目 `repo-visualizer` 使用教程

开源项目 repo-visualizer 使用教程

1. 项目的目录结构及介绍

repo-visualizer 是一个用于生成仓库目录结构图的 GitHub Action。以下是该项目的目录结构及其介绍：

repo-visualizer/
├── .github/
│   └── workflows/
│       └── action.yml
├── .husky/
├── src/
│   ├── index.js
│   └── ...
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── action.yml
├── diagram.svg
├── jest.config.cjs
├── package.json
├── tsconfig.json
└── yarn.lock

目录结构说明：

• .github/workflows/: 包含 GitHub Actions 的工作流配置文件。
• .husky/: 包含 Husky 的配置文件，用于 Git 钩子。
• src/: 包含项目的主要源代码文件。
• .gitignore: 指定 Git 忽略的文件和目录。
• .npmignore: 指定 npm 发布时忽略的文件和目录。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档。
• action.yml: GitHub Action 的配置文件。
• diagram.svg: 生成的目录结构图。
• jest.config.cjs: Jest 测试框架的配置文件。
• package.json: 项目的 npm 配置文件，包含依赖项和脚本。
• tsconfig.json: TypeScript 的配置文件。
• yarn.lock: Yarn 的锁定文件，确保依赖项版本一致。

2. 项目的启动文件介绍

repo-visualizer 的启动文件是 src/index.js。该文件是项目的入口点，负责生成仓库的目录结构图。

src/index.js 文件说明：

• 功能: 该文件主要负责读取仓库的目录结构，并生成相应的 SVG 图。
• 依赖: 依赖于项目中的其他模块和配置文件。
• 调用方式: 通过 GitHub Action 触发，根据配置生成目录结构图。

3. 项目的配置文件介绍

repo-visualizer 的配置文件主要包括 action.yml 和 package.json。

action.yml 文件说明：

• 功能: 定义 GitHub Action 的输入和输出参数，配置 Action 的行为。
• 主要配置项:
  • output_file: 指定生成的 SVG 图的输出路径。
  • excluded_paths: 指定需要排除的目录或文件。
  • max_depth: 指定目录结构图的最大深度。
  • should_push: 是否将生成的图推送到仓库。
  • commit_message: 提交时的消息。
  • branch: 指定推送的分支。

package.json 文件说明：

• 功能: 定义项目的元数据、依赖项和脚本。
• 主要配置项:
  • name: 项目名称。
  • version: 项目版本。
  • scripts: 定义项目的脚本命令，如 start、test 等。
  • dependencies: 项目的依赖项。
  • devDependencies: 开发环境的依赖项。

通过以上配置文件，可以灵活地定制 repo-visualizer 的行为，生成符合需求的目录结构图。