UI Component Usage Checker

一个企业级的 CLI 工具，用于分析和统计项目中 UI 组件库的使用情况。

✨ 特性

• 🔍 自动扫描：自动扫描项目代码，识别 UI 组件库的使用
• 📊 详细统计：统计每个组件的使用次数和频率
• 🎨 美观输出：在控制台以格式化表格形式展示结果
• 🔧 高度可配置：支持自定义配置不同的 UI 组件库
• 🌐 跨平台：支持 Windows 和 macOS
• 📝 多种输出格式：支持控制台、JSON、Markdown 输出
• ⚡ 高性能：使用 fast-glob 进行快速文件扫描

📦 支持的组件库

开箱即用，支持以下组件库：

• Ant Design (antd)
• Material-UI (@mui/material)
• Element UI (element-ui)
• Element Plus (element-plus)
• Shine UI (shine-ui)

可通过配置文件添加更多组件库支持。

🚀 安装

全局安装

npm install -g ui-component-usage-checker

项目内安装

npm install --save-dev ui-component-usage-checker

使用 npx（无需安装）

npx ui-component-usage-checker

📖 使用方法

基本使用

在项目根目录下运行：

component-usage

分析指定目录

component-usage -p ./src

使用自定义配置文件

component-usage -c ./my-config.json

输出为 JSON 格式

component-usage -o json

输出为 Markdown 并保存到文件

component-usage -o markdown > report.md

只分析特定组件库

component-usage -l antd

⚙️ 配置

配置文件

在项目根目录创建配置文件（按优先级排序）：

1. component-usage.config.json
2. .component-usage.json
3. component-usage.json

配置示例

{
  "libraries": [
    {
      "name": "antd",
      "importPatterns": [
        "import\\s+{([^}]+)}\\s+from\\s+['\"]antd['\"]",
        "import\\s+(\\w+)\\s+from\\s+['\"]antd\\/\\w+['\"]"
      ]
    },
    {
      "name": "my-custom-ui",
      "importPatterns": [
        "import\\s+{([^}]+)}\\s+from\\s+['\"]my-custom-ui['\"]"
      ]
    }
  ],
  "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"],
  "exclude": ["node_modules", "dist", "build", ".git", "coverage"]
}

配置项说明

| 配置项 | 类型 | 说明 | |--------|------|------| | libraries | Array | 要分析的组件库列表 | | libraries[].name | String | 组件库名称 | | libraries[].importPatterns | Array | 匹配导入语句的正则表达式数组（字符串格式） | | extensions | Array | 要扫描的文件扩展名 | | exclude | Array | 要排除的目录 |

📋 命令行选项

Options:
  -v, --version          输出当前版本号
  -p, --path <path>      要分析的路径（默认：当前目录）
  -c, --config <path>    自定义配置文件路径
  -o, --output <format>  输出格式：console, json, markdown（默认：console）
  -l, --library <name>   分析特定的组件库（如：antd, element-ui）
  --no-color            禁用彩色输出
  -h, --help            显示帮助信息

📊 输出示例

控制台输出

════════════════════════════════════════════════════════════════════════════════
  📊  UI Component Usage Analysis Report  
════════════════════════════════════════════════════════════════════════════════

📋 Summary:

┌────────────────────────────────┬───────────────┐
│ Metric                         │ Value         │
├────────────────────────────────┼───────────────┤
│ Total Libraries Used           │ 2             │
│ Total Components Used          │ 15            │
│ Total Import Statements        │ 45            │
│ Files Analyzed                 │ 23            │
└────────────────────────────────┴───────────────┘


📦 antd

┌────────────────────────────────┬───────────────┐
│ Info                           │ Value         │
├────────────────────────────────┼───────────────┤
│ Unique Components              │ 10            │
│ Total Imports                  │ 30            │
│ Files Using This Library       │ 15            │
└────────────────────────────────┴───────────────┘

  Components Used:

┌────────────────────────────────────────┬───────────────┬────────────┐
│ Component Name                         │ Import Count  │ Usage %    │
├────────────────────────────────────────┼───────────────┼────────────┤
│ Button                                 │ 8             │ 26.7%      │
│ Input                                  │ 6             │ 20.0%      │
│ Form                                   │ 5             │ 16.7%      │
│ Table                                  │ 4             │ 13.3%      │
└────────────────────────────────────────┴───────────────┴────────────┘

🔧 开发

克隆项目

git clone https://github.com/your-username/ui-component-usage-checker.git
cd ui-component-usage-checker

安装依赖

npm install

运行检查

npm run lint        # 运行 ESLint 检查
npm run format      # 格式化代码
npm start           # 运行工具

发布新版本

npm run release        # 自动升级补丁版本（不会发布到 npm）
npm run release:minor  # 升级次版本
npm run release:major  # 升级主版本

# 完整发布流程
npm run release              # 1. 更新版本和 CHANGELOG
git push --follow-tags origin main  # 2. 推送到 Git
npm publish                  # 3. 发布到 npm

详细说明：查看 发布指南

📝 版本管理与提交规范

本项目使用 standard-version 进行语义化版本管理，并配置了 commitlint + husky 来强制执行提交信息规范。

Commit 信息格式

提交信息格式遵循 Conventional Commits：

<type>(<scope>): <subject>

支持的 type：

• feat: 新功能
• fix: Bug 修复
• docs: 文档更新
• style: 代码格式调整
• refactor: 代码重构
• perf: 性能优化
• test: 测试相关
• chore: 构建或辅助工具变动

示例：

git commit -m "feat: add support for Vue 3 components"
git commit -m "fix: correct regex pattern for imports"
git commit -m "docs: update README with new examples"

注意：不符合规范的 commit 信息会被自动拦截，并显示详细的错误提示和修正建议！

查看详细说明：

• Commit 信息规范指南 - 详细的 commit 规范说明
• 发布指南 - 完整的发布流程

🤝 贡献

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'feat: add some amazing feature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 License

MIT

👨‍💻 作者

Your Name

🐛 问题反馈

如果您发现任何问题或有改进建议，请在 Issues 中提出。

⭐ Star History

如果这个项目对你有帮助，请给它一个 ⭐️！

Made with ❤️ by developers, for developers.