Frontend CLI Tool v1.0.2

前端项目初始化脚手架工具，支持 React 和 Vue 多种模板，从 Gitee 仓库下载最新模板。

📖 目录

• 特性
• 快速开始
• 安装
• 使用方法
• 可用模板
• 测试
• 注意事项
• 贡献
• 许可证

✨ 特性

• 🚀 快速初始化 React/Vue 项目
• 📦 支持多种构建工具：Webpack、Rsbuild、Rspack、Vite
• 🔄 自动从 Gitee 仓库获取最新模板
• 🧹 自动清理不需要的文件 (node_modules, .git 等)
• 💾 智能缓存机制，提高下载速度
• 🎨 交互式命令行界面，支持模板选择

NPM 插件形式使用

# 全局安装
npm install -g @ruan-feiyang/frontend-cli

# 或使用 npm link 链接本地项目 （开发调试）
cd path/to/front_end_cli
npm link

安装后即可全局使用 frontend-cli 命令。

作为库使用

npm install @ruan-feiyang/frontend-cli

const { initProject, listTemplates, TEMPLATES, cleanCache } = require('@ruan-feiyang/frontend-cli');

// 列出所有模板
listTemplates();

// 初始化项目
await initProject('my-app', 'react18-ts-webpack');

// 清理缓存
cleanCache();

使用方法

初始化新项目（交互式）

frontend-cli init

初始化指定模板的项目

# 指定项目名称
frontend-cli init my-app

# 指定模板
frontend-cli init my-app -t react18-ts-webpack

# 强制覆盖已存在的目录
frontend-cli init my-app -f

列出所有模板

frontend-cli list

管理缓存

# 清理所有缓存
frontend-cli clean

# 显示缓存状态
frontend-cli cache

显示帮助

frontend-cli help

📦 可用模板

React 模板

| 模板名称 | 描述 | 技术栈 | 推荐场景 | |---------|------|--------|----------| | react17-js-webpack | React 17 + JavaScript + Webpack | React 17, JavaScript, Webpack 5 | 传统项目，需要兼容性 | | react17-ts-webpack | React 17 + TypeScript + Webpack | React 17, TypeScript, Webpack 5 | 企业级应用，需要类型安全 | | react18-js-webpack | React 18 + JavaScript + Webpack | React 18, JavaScript, Webpack 5 | 现代项目，使用 React 18 新特性 | | react18-ts-webpack | React 18 + TypeScript + Webpack | React 18, TypeScript, Webpack 5 | 现代企业级应用 | | react19-ts-rsbuild | React 19 + TypeScript + Rsbuild | React 19, TypeScript, Rsbuild | 推荐 - 现代快速构建 | | react19-ts-rspack | React 19 + TypeScript + Rspack | React 19, TypeScript, Rspack | 高性能构建，兼容 Webpack 生态 |

Vue 模板

| 模板名称 | 描述 | 技术栈 | 推荐场景 | |---------|------|--------|----------| | vue2-js-webpack | Vue 2 + JavaScript + Webpack | Vue 2, JavaScript, Webpack 5 | Vue 2 项目，需要兼容性 | | vue3-ts-vite | Vue 3 + TypeScript + Vite | Vue 3, TypeScript, Vite | 推荐 - 现代 Vue 开发 |

🧪 测试

项目包含完善的测试脚本，用于验证 CLI 功能：

基本功能测试

# 运行测试
node test-cli.js

# 测试会验证以下功能：
# 1. 帮助命令 - 验证 CLI 能否正确显示帮助信息
# 2. 列出模板 - 验证模板列表显示正常
# 3. 缓存状态 - 验证缓存管理功能
# 4. 清理缓存 - 验证缓存清理功能
# 5. 无效命令处理 - 验证错误处理机制

完整功能测试（需要网络）

# 测试指定模板初始化
node bin/cli.js init test-project -t react18-ts-webpack

# 交互式初始化
node bin/cli.js init test-project

# 注意：完整测试需要网络连接访问 Gitee 仓库

开发调试

# 运行本地开发版本
node bin/cli.js

# 查看命令帮助
node bin/cli.js --help

🚀 快速开始

# 安装 CLI
npm install -g @ruan-feiyang/frontend-cli

# 查看所有可用模板
frontend-cli list

# 创建新项目（交互式）
frontend-cli init my-app

# 或直接指定模板
frontend-cli init my-app -t react19-ts-rsbuild

# 进入项目并安装依赖
cd my-app
npm install
npm run dev

📝 注意事项

系统要求

• Node.js: 版本 >= 14.0.0
• Git: 需要安装 Git 用于从 Gitee 克隆模板
• 网络: 需要网络连接访问 Gitee 仓库

使用限制

• 项目名称不能包含特殊字符：<>:"/\|?*
• 初始化时会自动移除模板中的 node_modules、dist、.git 等目录
• 目标目录不存在时会自动创建
• 使用 -f 参数可以强制覆盖已存在的目录

缓存机制

• 缓存目录: ~/.frontend-cli-cache/ 存储下载的模板
• 缓存清理: 使用 frontend-cli clean 清理所有缓存
• 缓存状态: 使用 frontend-cli cache 查看缓存状态

🤝 贡献

欢迎贡献！以下是参与方式：

报告问题

• 在 Gitee 仓库提交 Issue
• 描述清晰的问题复现步骤

提交代码

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 创建 Pull Request

开发指南

# 克隆项目
git clone https://gitee.com/qingfeng_feiyang/front-end-template.git

# 安装依赖
cd front_end_cli
npm install

# 链接本地包
npm link

# 运行测试
node test-cli.js

📄 许可证

MIT License