hale-cli

v1.0.5

Published

a year ago

🚀 Modern Frontend Project Generator - Support for React, Vue, Angular, Next.js, Nuxt, UmiJS with TypeScript, testing, and beautiful CLI experience

🚀 Hale CLI - 现代前端项目生成器

🎯 一个功能完整、用户友好的现代前端项目脚手架工具

快速开始 • 功能特性 • 支持框架 • 使用指南 • 贡献指南

📋 目录

🚀 快速开始

安装

npm install -g hale-cli

创建项目

# 交互式创建
hale create my-app

# 快速创建 (跳过交互)
hale create my-app -t react -p npm --yes

# 使用别名
hale new my-app

基本命令

# 查看帮助
hale --help

# 查看版本
hale --version

# 分析项目
hale analyze

# 管理模板
hale template list

✨ 功能特性

🎨 增强的 CLI 体验

🌈 美观界面 - 渐变色彩横幅和 ASCII 艺术字
📋 智能交互 - 图标化选项和分组显示
⚡ 快速模式 - --yes 标志跳过交互
🔧 命令别名 - 简化常用命令

📊 项目分析功能

🔍 智能检测 - 自动识别框架、工具和配置
📈 统计分析 - 文件数量、大小和分类统计
🛠️ 依赖分析 - 生产和开发依赖管理
📋 脚本展示 - 显示所有可用的 npm scripts

📋 模板管理系统

🗂️ 自定义模板 - 添加、删除和管理个人模板
📁 本地存储 - 模板存储在 .hale/templates/ 目录
🏷️ 元数据支持 - 作者、版本、标签等信息
🔄 无缝集成 - 与内置模板统一管理

🎯 支持框架

| 框架 | 状态 | 描述 | 图标 | | ----------- | ----------- | ---------------------- | ---- | | React | ✅ 完全支持 | 用户界面构建库 | ⚛️ | | Vue 3 | ✅ 完全支持 | 渐进式 JavaScript 框架 | 💚 | | Vue 2 | ✅ 完全支持 | Vue 2 遗留版本支持 | 💚 | | Angular | ✅ 完全支持 | 企业级应用框架 | 🅰️ | | Next.js | ✅ 完全支持 | React 生产框架 | ▲ | | Nuxt | ✅ 完全支持 | Vue 全栈框架 | 💚 | | UmiJS | ✅ 完全支持 | 企业级 React 框架 | 🍄 |

框架特性对比

| 特性 | React | Vue 3 | Angular | Next.js | Nuxt | UmiJS | | -------------- | ----- | ----- | ------- | ------- | ---- | ----- | | TypeScript | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | 路由 | ✅ | ✅ | ✅ | 内置 | 内置 | 内置 | | 状态管理 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | PWA 支持 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | SSR/SSG | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ |

🎨 CSS 预处理器

支持的预处理器

| 预处理器 | 状态 | 特性 | 图标 | | ------------- | ----------- | ---------------------- | ---- | | Sass/SCSS | ✅ 完全支持 | 变量、嵌套、混合、函数 | 💅 | | Less | ✅ 完全支持 | 变量、嵌套、混合、函数 | 🔷 | | Plain CSS | ✅ 完全支持 | 标准 CSS，无预处理 | 📝 |

自动生成的设计系统

// 🎨 变量系统
$primary-color: #1890ff;
$secondary-color: #722ed1;
$success-color: #52c41a;

// 📏 间距系统
$spacing-xs: 0.25rem; // 4px
$spacing-sm: 0.5rem; // 8px
$spacing-md: 1rem; // 16px

// 🔧 实用混合宏
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin button-variant($bg-color, $text-color: $white) {
  background-color: $bg-color;
  color: $text-color;

  &:hover:not(:disabled) {
    background-color: darken($bg-color, 10%);
  }
}

生成的文件结构

project/
├── src/
│   ├── App.scss (或 .less/.css)
│   ├── index.scss (或 .less/.css)
│   └── styles/
│       ├── variables.scss    # 设计系统变量
│       └── mixins.scss       # 实用混合宏
├── vite.config.ts            # 预处理器配置
└── package.json              # 自动依赖管理

📦 包管理器支持

| 包管理器 | 支持状态 | 特性 | | ----------- | ----------- | -------------------- | | 📦 npm | ✅ 完全支持 | 默认选项，广泛兼容 | | 🧶 yarn | ✅ 完全支持 | 快速安装，工作区支持 | | ⚡ pnpm | ✅ 完全支持 | 极速安装，磁盘高效 |

自动适配功能

✅ CLI 参数支持 - -p, --package-manager <pm>
✅ 交互式选择 - 图标化的包管理器选项
✅ 模板变量替换 - README 和脚本自动适配
✅ 项目分析检测 - 通过 lock 文件自动识别

🔧 使用指南

基本用法

# 🚀 创建项目
hale create my-app

# ⚡ 快速创建
hale create my-app -t react -p yarn --yes

# 🔄 使用别名
hale new my-app

高级选项

# 📋 指定所有选项
hale create my-app \
  --template react \
  --package-manager pnpm \
  --skip-install \
  --skip-git

# 🎯 交互式选择界面
🎯 Select a framework or template:
  ⚛️  React
  ▲  Next.js (React)
  🍄  UmiJS (React)
  💚  Vue 3
  💚  Nuxt (Vue)
  💚  Vue 2
  🅰️  Angular

📦 Select a package manager:
  📦  npm
  🧶  yarn
  ⚡  pnpm (Fast)

🎨 Select CSS preprocessor:
  💅  Sass/SCSS
  🔷  Less
  📝  Plain CSS

🔧 Select additional features:
  ✅ ESLint (Code linting)
  ✅ Prettier (Code formatting)
  ✅ Unit Testing (Jest/Vitest)
  ✅ TypeScript
  ☐ Router
  ☐ State Management
  ☐ PWA Support

模板管理

# 📋 查看模板
hale template list
hale tpl ls

# ➕ 添加自定义模板
hale template add my-template

# 🗑️ 删除模板
hale template remove my-template

项目分析

# 📊 分析当前项目
hale analyze

# 🔍 分析指定项目
hale analyze -p /path/to/project

# 🖥️ 查看环境信息
hale env

🏗️ 架构设计

目录结构

src/
├── commands/                 # CLI 命令
│   ├── create.ts            # 项目创建命令
│   └── template.ts          # 模板管理命令
├── generators/              # 项目生成器
│   ├── index.ts            # 统一入口
│   └── frameworks/         # 框架分类
│       ├── react/          # React 生态
│       ├── vue/            # Vue 生态
│       ├── angular/        # Angular 生态
│       └── meta/           # 元框架
├── templates/              # 项目模板
│   ├── react/             # React 模板
│   ├── vue3/              # Vue 3 模板
│   ├── common/            # 通用模板
│   └── ...
├── utils/                 # 工具函数
│   ├── cli-helpers.ts     # CLI 增强工具
│   └── project-analyzer.ts # 项目分析工具
├── types/                 # 类型定义
└── index.ts              # 主入口

生成器架构

// 🔧 统一接口设计
export interface ProjectConfig {
  projectName: string;
  projectPath: string;
  framework: Framework;
  packageManager: PackageManager;
  bundler: Bundler;
  cssPreprocessor: CssPreprocessor;
  features: string[];
}

// 🎯 框架生成器映射
export const frameworkGenerators = {
  react: generateReactProject,
  vue3: generateVue3Project,
  vue2: generateVue2Project,
  angular: generateAngularProject,
  nextjs: generateNextjsProject,
  nuxt: generateNuxtProject,
  umi: generateUmiProject,
} as const;

📊 项目分析

智能检测功能

📊 Project Analysis

🏗️  Framework: react
📦 Package Manager: npm
⚡ Bundler: vite

🔧 Features:
  ✅ TypeScript
  ✅ ESLint
  ✅ Prettier
  ✅ Testing
  ❌ Router
  ❌ State Management
  ❌ PWA

📚 Dependencies:
  Production: 8
  Development: 14

📁 Project Size:
  Total Files: 184
  Total Size: 499.05 KB

📋 File Breakdown:
  source: 164 files (203.69 KB, 40.8%)
  config: 4 files (282.23 KB, 56.6%)
  tests: 8 files (6.57 KB, 1.3%)
  assets: 7 files (581 B, 0.1%)

🚀 Available Scripts:
  build: vite build
  dev: vite
  test: vitest
  lint: eslint . --ext ts,tsx

分析功能特性

🔍 框架检测 - 自动识别 React、Vue、Angular 等
🛠️ 工具识别 - 包管理器、构建工具、测试框架
📈 统计分析 - 文件数量、大小、分类统计
📋 脚本展示 - 所有可用的 npm scripts

📋 模板管理

自定义模板系统

# 📋 查看所有模板
hale template list

📋 Available Templates

1. my-react-template
   Enterprise React template with advanced features
   Framework: react
   Author: John Doe
   Tags: enterprise, typescript, testing
   Created: 2024/01/15

2. vue-admin-template
   Vue 3 admin dashboard template
   Framework: vue3
   Author: Jane Smith
   Tags: admin, dashboard, vue3
   Created: 2024/01/20

模板配置

{
  "templates": [
    {
      "name": "my-react-template",
      "description": "Enterprise React template",
      "framework": "react",
      "path": "/path/to/template",
      "author": "John Doe",
      "version": "1.0.0",
      "tags": ["enterprise", "typescript"],
      "createdAt": "2024-01-15T10:00:00.000Z",
      "updatedAt": "2024-01-15T10:00:00.000Z"
    }
  ]
}

🧪 测试验证

功能测试覆盖

| 功能模块 | 测试状态 | 覆盖率 | | ---------------- | -------- | ------ | | 项目生成 | ✅ 通过 | 100% | | 框架支持 | ✅ 通过 | 100% | | CSS 预处理器 | ✅ 通过 | 100% | | 包管理器 | ✅ 通过 | 100% | | 模板管理 | ✅ 通过 | 100% | | 项目分析 | ✅ 通过 | 100% |

兼容性测试

✅ Node.js - 16.x, 18.x, 20.x
✅ 操作系统 - Windows, macOS, Linux
✅ 包管理器 - npm, yarn, pnpm
✅ 构建工具 - Vite, Webpack

🔮 未来规划

短期目标 (v1.1)

[ ] Svelte 支持 - 添加 Svelte 和 SvelteKit 支持
[ ] Solid.js 支持 - 现代响应式框架支持
[ ] PostCSS 集成 - 添加 PostCSS 插件支持
[ ] Tailwind CSS - 原子化 CSS 框架集成

中期目标 (v1.2)

[ ] 模板市场 - 在线模板仓库和分享
[ ] 插件系统 - 支持第三方插件扩展
[ ] 主题系统 - 动态主题切换支持
[ ] 配置预设 - 团队配置预设和共享

长期目标 (v2.0)

[ ] 可视化界面 - Web 界面的项目生成器
[ ] 云端同步 - 模板和配置云端同步
[ ] AI 助手 - 智能项目配置建议
[ ] 性能监控 - 项目性能分析和优化

🤝 贡献指南

开发环境设置

# 克隆仓库
git clone https://github.com/GaoWenHan/Hale.git
cd Hale

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建项目
npm run build

# 运行测试
npm test

贡献流程

🍴 Fork 项目 - 创建你的功能分支
💻 开发功能 - 编写代码和测试
📝 提交更改 - 遵循提交规范
🔄 创建 PR - 详细描述你的更改
✅ 代码审查 - 等待维护者审查

代码规范

📏 ESLint - 代码质量检查
💅 Prettier - 代码格式化
📝 TypeScript - 类型安全
🧪 Jest - 单元测试

� 项目优化

架构优化亮点

🛠️ CommonGenerator 工具类

统一配置文件生成逻辑
环境变量、代码质量工具、测试配置统一管理
PWA 和样式文件生成标准化

🎨 完整设计系统

统一的颜色、字体、间距变量系统
实用的 CSS 混合宏和工具函数
响应式断点和工具类

📦 优化效果

可维护性: 通用配置修改只需在一处进行
一致性: 所有框架生成项目具有统一结构
扩展性: 新增框架支持更加容易

📄 许可证

MIT License - 详见 LICENSE 文件

🙏 致谢

感谢所有为 Hale CLI 做出贡献的开发者和用户！

🎨 设计灵感 - Create React App, Vue CLI, Angular CLI
🛠️ 技术栈 - TypeScript, Commander.js, Inquirer.js, EJS
📚 文档 - 社区反馈和建议

🚀 让前端开发更简单、更高效！

⭐ Star • 🐛 Report Bug • 💡 Request Feature

Made with ❤️ by the Hale CLI Team