Stylus 项目教程

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

Stylus 项目的目录结构如下：

stylus/
├── .github/
│   └── workflows/
├── assets/
├── docs/
├── src/
│   ├── background/
│   ├── content/
│   ├── options/
│   ├── popup/
│   └── shared/
├── test/
│   ├── background/
│   ├── content/
│   ├── options/
│   ├── popup/
│   └── shared/
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── .stylelintrc
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── webpack.config.js

目录结构介绍

• .github/workflows/: 包含 GitHub Actions 的工作流配置文件。
• assets/: 存放项目的静态资源文件，如图片、图标等。
• docs/: 存放项目的文档文件。
• src/: 项目的源代码目录，包含主要的业务逻辑。
  • background/: 存放浏览器扩展的后台脚本。
  • content/: 存放内容脚本，用于修改网页内容。
  • options/: 存放选项页面的代码。
  • popup/: 存放弹出页面的代码。
  • shared/: 存放共享的代码模块。
• test/: 存放项目的测试代码。
  • background/: 后台脚本的测试代码。
  • content/: 内容脚本的测试代码。
  • options/: 选项页面的测试代码。
  • popup/: 弹出页面的测试代码。
  • shared/: 共享代码模块的测试代码。
• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .eslintrc.json: ESLint 配置文件，用于代码检查。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 配置文件，用于代码格式化。
• .stylelintrc: Stylelint 配置文件，用于 CSS/Stylus 代码检查。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档。
• package.json: 项目的 npm 配置文件，包含依赖和脚本。
• tsconfig.json: TypeScript 配置文件。
• webpack.config.js: Webpack 配置文件，用于打包项目。

2. 项目的启动文件介绍

Stylus 项目的启动文件主要位于 src/ 目录下，具体包括：

• src/background/background.ts: 后台脚本的主入口文件，负责处理浏览器扩展的后台逻辑。
• src/content/content.ts: 内容脚本的主入口文件，负责修改网页内容。
• src/options/options.ts: 选项页面的主入口文件，负责处理用户设置。
• src/popup/popup.ts: 弹出页面的主入口文件，负责处理用户交互。

这些文件是项目的主要入口点，通过这些文件可以启动和运行 Stylus 浏览器扩展。

3. 项目的配置文件介绍

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

• .eslintrc.json: 用于配置 ESLint，确保代码风格一致。
• .prettierrc: 用于配置 Prettier，自动格式化代码。
• .stylelintrc: 用于配置 Stylelint，检查 CSS/Stylus 代码风格。
• package.json: 包含项目的依赖、脚本和元数据。
• tsconfig.json: 用于配置 TypeScript 编译选项。
• webpack.config.js: 用于配置 Webpack，打包项目代码。

这些配置文件确保了项目的代码质量和构建流程的一致性。