# uniapp-component-analyzer

**Repository Path**: WebFronter/uniapp-component-analyzer

## Basic Information

- **Project Name**: uniapp-component-analyzer
- **Description**: uniapp-component-analyzer 工具，分析uniapp项目组件&页面调用关系
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-04
- **Last Updated**: 2026-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp-component-analyzer

[![npm version](https://img.shields.io/npm/v/uniapp-component-analyzer.svg)](https://www.npmjs.com/package/uniapp-component-analyzer)
[![license](https://img.shields.io/npm/l/uniapp-component-analyzer.svg)](https://github.com/yourusername/uniapp-component-analyzer/blob/main/LICENSE)

🔍 **UniApp 项目组件依赖分析工具** - 自动分析 UniApp 项目的组件依赖关系，生成可视化思维导图和交互式图表。

## ✨ 功能特性

- 📱 **页面依赖分析** - 自动扫描并分析所有页面的组件依赖
- 🧩 **组件依赖链** - 递归分析组件间的依赖关系
- 📊 **多格式输出** - 支持 Markdown、JSON、CSV、TXT、HTML 多种格式
- 🎨 **交互式图表** - 生成基于 ECharts 的交互式依赖关系图
- 🔗 **页面跳转分析** - 分析页面间的跳转关系
- 📈 **使用统计** - 统计组件使用频率和热度排行
- 🎯 **只统计自定义组件** - 自动过滤 uniapp 原生组件、HTML 标签和 uni-ui 组件

## 📦 安装

### 全局安装（推荐）

```bash
npm install -g uniapp-component-analyzer
```

### 项目内安装

```bash
npm install --save-dev uniapp-component-analyzer
```

## 🚀 使用方法

### 全局安装后使用

在任何 UniApp 项目根目录下运行：

```bash
# 使用主命令
uniapp-analyze

# 或使用别名
uniapp-analyzer
```

### 项目内安装后使用

在 package.json 中添加脚本：

```json
{
  "scripts": {
    "analyze": "uniapp-analyze"
  }
}
```

然后运行：

```bash
npm run analyze
```

### 使用 npx（无需安装）

```bash
npx uniapp-component-analyzer
```

## 📋 前置要求

- ✅ 必须在 UniApp 项目根目录下运行（包含 `pages.json` 文件）
- ✅ Node.js >= 24.11.1
- ✅ 项目结构符合 UniApp 标准

## 📂 输出文件

运行后会在项目根目录生成 `mindmap-output/` 文件夹，包含以下文件：

### 1. component-mindmap.md
Markdown 格式的思维导图，包含：
- 📊 项目概览统计
- 📱 页面列表及依赖
- 📦 组件使用统计
- 🔍 组件详情
- 🔗 页面跳转关系

### 2. component-data.json
JSON 格式的结构化数据，包含：
- 完整的页面信息
- 组件定义和依赖关系
- 使用统计数据
- 元数据信息

### 3. component-usage.csv
CSV 格式的组件统计表格，可用 Excel 打开，包含：
- 组件名称
- 使用次数
- 组件类型
- 文件路径
- 依赖组件列表

### 4. component-report.txt
纯文本格式的分析报告，包含：
- 项目统计摘要
- 页面依赖分析
- 组件使用排行榜
- 组件依赖关系

### 5. component-graph.html
交互式 HTML 图表（基于 ECharts），提供：
- 🔍 可视化依赖关系图
- 🎯 组件搜索功能
- 📊 统计面板
- 🖱️ 交互式节点操作

### 6. page-navigation.html
页面跳转关系可视化图表，展示：
- 🔗 页面间的跳转关系
- 🎯 关键页面识别
- 📊 入度出度统计
- 🔄 双向跳转检测

## 🎯 使用场景

### 1. 项目重构
- 了解组件依赖关系，安全地重构代码
- 识别高频组件，优先优化
- 发现冗余组件，清理无用代码

### 2. 团队协作
- 新成员快速了解项目结构
- 文档化组件关系
- 代码审查参考

### 3. 性能优化
- 识别组件引用热点
- 优化组件加载策略
- 减少不必要的依赖

### 4. 架构设计
- 评估组件复杂度
- 规划组件拆分
- 优化目录结构

## 📖 示例输出

### 控制台输出

```
╔══════════════════════════════════════════════════════╗
║      UniApp 组件依赖分析工具                         ║
║      自动生成项目组件思维导图                        ║
╚══════════════════════════════════════════════════════╝

🔍 检查项目环境...
✅ 检测到UniApp项目

📦 检查依赖...
  ✓ fs-extra
  ✓ glob
  ✓ cheerio
  ✓ @babel/parser
  ✓ @babel/traverse

🚀 开始分析项目组件依赖...

📱 扫描页面...
  发现页面: pages/index/index
  发现页面: pages/user/user
  ...
✅ 共扫描到 45 个页面

🔍 扫描组件依赖链...
✅ 共分析 128 个自定义组件

🔗 分析页面跳转关系...
✅ 分析了 45 个页面的跳转关系

📝 开始生成分析报告...
✓ Markdown思维导图已生成
✓ JSON数据已生成
✓ CSV数据已生成
✓ 文本报告已生成
✅ 交互式HTML图表已生成

🎉 分析完成！
📁 输出文件保存在: mindmap-output/

🌐 交互式图表:
   用浏览器打开: mindmap-output/component-graph.html
```

### Markdown 输出示例

```markdown
# 🗺️ UniApp项目组件依赖关系图

> **分析报告** | 生成时间: 2026-01-04 10:30:00

## 📊 项目概览

- **页面总数**: 45 个
- **自定义组件**: 128 个
- **公共组件**: 85 个
- **私有组件**: 43 个
- **总引用次数**: 312 次
- **页面跳转关系**: 67 个

## 📱 页面列表

### 1. pages/index/index

**文件路径**: pages/index/index.vue

**引用的自定义组件:**

1. **TopBar** [public] ⚡被引用 15 次
2. **ProductList** [public] ⚡被引用 8 次
3. **Banner** [public] ⚡被引用 6 次
   - 依赖的子组件:
     1. SwiperItem [public] (使用2次)
     2. ImageLoader [public] (使用12次)

...
```

## ⚙️ 配置说明

工具内置了合理的默认配置，通常无需修改。如需自定义，可以参考 `lib/config.js`：

```javascript
module.exports = {
    // 需要排除的文件或目录
    exclude: [
        'node_modules',
        'dist',
        'build',
        '.git',
        'unpackage'
    ],

    // 需要排除的组件前缀
    excludeComponentPrefixes: [
        'u-',      // uView UI
        'uni-',    // uni-ui
        'v-'       // Vue指令
    ],

    // 输出配置
    output: {
        dir: 'mindmap-output',
        formats: ['markdown', 'json', 'csv', 'text']
    }
};
```

## 🔧 技术栈

- **@babel/parser** - JavaScript 代码解析
- **@babel/traverse** - AST 遍历
- **cheerio** - HTML/XML 解析
- **fs-extra** - 文件系统操作
- **glob** - 文件匹配
- **chalk** - 终端颜色输出
- **ECharts** - 数据可视化

## 📝 工作原理

1. **解析 pages.json** - 获取所有页面路径
2. **扫描页面文件** - 分析每个页面的 template 和 script 部分
3. **提取组件依赖** - 识别自定义组件（排除原生组件）
4. **递归分析组件** - 分析组件的子组件依赖
5. **统计使用频率** - 计算每个组件被引用的次数
6. **分析页面跳转** - 提取 uni.navigateTo 等跳转API
7. **生成多格式报告** - 输出 Markdown、JSON、CSV、HTML 等格式

## ❓ 常见问题

### Q: 为什么某些组件没有被统计？
A: 工具只统计自定义组件（.vue 文件），自动过滤以下内容：
- uniapp 原生组件（view、text、button等）
- HTML 标签（div、span等）
- uni-ui 组件（uni-、u- 前缀）

### Q: 如何排除特定目录？
A: 修改 `lib/config.js` 中的 `exclude` 配置。

### Q: 支持分包吗？
A: 支持！工具会自动分析 pages.json 中的 subPackages 配置。

### Q: 交互式图表无法显示？
A: 请确保浏览器能访问 CDN（ECharts），或在本地部署 ECharts 资源。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License

## 👨‍💻 作者

Your Name - your.email@example.com

## 🔗 相关链接

- [GitHub 仓库](https://github.com/yourusername/uniapp-component-analyzer)
- [问题反馈](https://github.com/yourusername/uniapp-component-analyzer/issues)
- [更新日志](https://github.com/yourusername/uniapp-component-analyzer/blob/main/CHANGELOG.md)

---

如果这个工具对你有帮助，请给个 ⭐️ Star 支持一下！