手写前端脚手架cli

把自己写的包添加到本地仓库（全局）并运行

#!/usr/bin/env node
console.log("肯德基疯狂星期四v我50");

package.json添加bin字段

把当前项目添加到本地包（全局）

npm link

Commander.js 使用指南

简介

commander 是一个 Node.js 命令行界面解决方案，提供了完整的命令行工具开发功能。

主要特性

• 命令定义: 支持子命令和选项定义
• 参数解析: 自动解析命令行参数
• 帮助信息: 自动生成帮助文档
• 版本管理: 内置版本号支持

基本用法

1. 安装

bashnpm install commander

2. 创建命令行程序

const { Command } = require('commander');
const program = new Command();program.name('my-cli').description('CLI tool example').version('1.0.0');program.parse();

3. 添加命令

program.command('deploy <service>').description('Deploy a service').option('-f, --force', 'force deployment').action((service, options) => {console.log(`Deploying ${service} with force: ${options.force}`);});

4. 处理选项

program.option('-d, --debug', 'output extra debugging').option('-s, --small', 'small pizza size').option('-p, --pizza-type <type>', 'flavour of pizza');program.parse(process.argv);const options = program.opts();
if (options.debug) console.log(options);

核心API

• Command: 主要的命令类
• program.version(): 设置版本信息
• program.command(): 定义子命令
• program.option(): 定义选项
• program.action(): 设置命令执行回调
• program.parse(): 解析命令行参数

Chalk 使用指南

简介

chalk 是一个用于 Node.js 的终端字符串样式库，可以轻松地为控制台输出添加颜色和样式。

主要特性

• 简单易用: 链式 API 调用
• 丰富的颜色: 支持多种前景色、背景色和样式
• 嵌套使用: 支持样式嵌套
• 条件禁用: 自动检测是否支持颜色输出

基本用法

1. 安装

npm install chalk

2. 基础使用

const chalk = require('chalk');console.log(chalk.blue('Hello world!'));
console.log(chalk.red.bold('Error message'));
console.log(chalk.green.underline('Success'));

3. 常用样式方法

颜色样式

• chalk.red() - 红色文本
• chalk.green() - 绿色文本
• chalk.blue() - 蓝色文本
• chalk.yellow() - 黄色文本
• chalk.magenta() - 洋红色文本
• chalk.cyan() - 青色文本

背景色

• chalk.bgRed() - 红色背景
• chalk.bgGreen() - 绿色背景
• chalk.bgYellow() - 黄色背景

文本样式

• chalk.bold() - 粗体
• chalk.underline() - 下划线
• chalk.italic() - 斜体
• chalk.strikethrough() - 删除线

4. 高级用法

// 组合样式
console.log(chalk.blue.bgRed.bold('Hello world!'));// 嵌套样式
console.log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));// 模板字符串
console.log(chalk`{red Hello} {green.bold world}!`);

5. 条件使用

const chalk = require('chalk');// 检查是否支持颜色
if (chalk.supportsColor) {console.log(chalk.green('支持颜色输出'));
} else {console.log('不支持颜色输出');
}// 强制启用/禁用颜色
const ctx = new chalk.Instance({level: 1}); // 强制启用基本颜色
const noColor = new chalk.Instance({level: 0}); // 禁用颜色

inquirer 使用指南

inquirer 是一个用于创建交互式命令行界面的 Node.js 库。它允许开发者通过终端与用户进行交互，收集用户输入。

主要特性

• 多种提问类型：支持 input、confirm、list、rawlist、expand、checkbox、password、editor 等多种交互方式
• 验证机制：可以对用户输入进行验证，确保数据符合要求
• 异步支持：基于 Promise，易于集成到现代 JavaScript 应用中

基本用法

const inquirer = require('inquirer');inquirer.prompt([{type: 'input',name: 'username',message: '请输入您的用户名：'}]).then(answers => {console.log('用户名:', answers.username);});

常见使用场景

• CLI 工具开发
• 配置文件生成
• 项目初始化向导
• 数据采集脚本

如果您需要了解具体的使用方法或者遇到了相关问题，请提供更多详细信息，我可以为您提供更针对性的帮助。

[ora](javascript:void(0)) 终端加载动画库

[ora](javascript:void(0)) 是一个优雅的 Node.js 终端加载动画库，用于在命令行界面中显示旋转指示器(spinner)。

主要特性

• 多种内置 spinner 样式：提供丰富的旋转动画效果
• 彩色输出支持：支持自定义颜色和样式
• 简单易用的 API：快速集成到 CLI 应用中
• 可自定义文本：可以在 spinner 旁边显示描述文本

基本用法

const ora = require('ora');// 创建并启动 spinner
const spinner = ora('Loading...').start();// 模拟异步操作
setTimeout(() => {spinner.succeed('操作完成'); // 成功状态// spinner.fail('操作失败'); // 失败状态// spinner.warn('警告信息'); // 警告状态
}, 2000);

常见使用场景

• 显示长时间运行的任务进度
• 网络请求等待状态指示
• 文件处理进度展示
• CLI 工具中的状态反馈

[ora](javascript:void(0)) 通常与 [inquirer](javascript:void(0)) 等 CLI 交互库配合使用，提升命令行应用的用户体验。

创建 ASCII 文字艺术

figlet 是一个用于创建 ASCII 文字艺术的 Node.js 库，可以将普通文本转换为大型彩色字体的字符画。

主要特性

• 多种字体支持：内置数十种不同的 ASCII 字体样式
• 彩色输出：支持 ANSI 颜色代码，可生成彩色文字艺术
• 简单易用：提供简洁的 API 接口
• 命令行工具：既可作为库使用，也可作为 CLI 工具

基本用法

const figlet = require('figlet');// 生成标准字体的 ASCII 文字
figlet('Hello World', function(err, data) {if (err) {console.log('出错了...');console.dir(err);return;}console.log(data);
});// 使用指定字体
figlet.text('Hello', {font: 'Ghost',horizontalLayout: 'default',verticalLayout: 'default'
}, function(err, data) {console.log(data);
});

常见使用场景

• CLI 应用的欢迎界面
• 终端中的标题展示
• 个性化文本装饰
• 命令行工具的品牌标识

figlet 通常与其他终端美化库（如 [chalk](javascript:void(0))、[ora](javascript:void(0)) 等）配合使用，创建更加吸引人的命令行界面。

fs-extra 增强版的 Node.js 文件系统模块

fs-extra 是一个增强版的 Node.js 文件系统模块，扩展了原生 fs 模块的功能。

主要特性

• Promise 支持：所有异步方法都返回 Promise，支持 async/await
• 额外功能：提供更多实用的文件操作方法
• 兼容原生：完全兼容 Node.js 原生 fs 模块
• 简化 API：减少样板代码，提高开发效率

核心功能

• 文件操作增强

• copy() / copySync() - 复制文件或目录
• move() / moveSync() - 移动文件或目录
• ensureFile() / ensureDir() - 确保文件/目录存在

• JSON 文件处理

• readJson() / writeJson() - 直接读写 JSON 文件
• 自动处理序列化和反序列化

• 目录操作

• emptyDir() - 清空目录
• remove() - 删除文件或目录（递归）

基本用法

const fs = require('fs-extra');// 异步操作（Promise）
async function example() {try {await fs.copy('/src', '/dest');const data = await fs.readJson('./package.json');await fs.outputFile('./test.txt', 'hello world');} catch (err) {console.error(err);}
}// 同步操作
fs.copySync('/src', '/dest');
const data = fs.readJsonSync('./package.json');

fs-extra 简化了常见的文件系统操作，是 Node.js 开发中非常实用的工具库。

在 Node.js 应用程序中执行 Git 克隆操作

git-clone 是一个 Node.js 库，允许在 Node.js 应用程序中执行 Git 克隆操作。

主要特性

• 程序化克隆：通过 JavaScript 代码执行 git clone 命令
• Promise 支持：异步操作返回 Promise，支持现代 JavaScript 异步处理
• 参数配置：支持传递各种 Git 克隆选项和参数
• 错误处理：提供详细的错误信息和状态码

基本用法

const gitClone = require('git-clone');// 克隆仓库到指定目录
gitClone('https://github.com/user/repo.git', './local-directory').then(() => {console.log('克隆成功');}).catch((err) => {console.error('克隆失败:', err);});

常见参数

• repo - 远程仓库 URL • targetPath - 本地目标路径 • options - 克隆选项对象，可包含：

• checkout - 指定要检出的分支或标签
• shallow - 是否进行浅克隆
• depth - 克隆深度

这个库封装了底层的 Git 命令行操作，使得在 Node.js 应用中集成 Git 功能变得更加简单。

手写一个脚手架cli

#!/usr/bin/env node
const { program } = require("commander");
const chalk = require("chalk");
const inquirer = require("inquirer");
const ora = require("ora");
const figlet = require("figlet");
const fs = require("fs-extra");
const path = require("path");
const gitClone = require("git-clone");const projectList = {vue: "https://github.com/kfc-vme50/vue-template.git",react: "https://github.com/kfc-vme50/react-template.git","react&ts": "https://github.com/kfc-vme50/react-template-ts.git","vue&ts": "https://github.com/kfc-vme50/vue-template-ts.git",
};// 首行提示
program.name("kfc-vme50-cli").usage("<command> [options]");
// 版本号
program.version(`v${require("../package.json").version}`);// 命令
// 创建项目的命令
program.command("create <app-name>").description("创建一个新的项目").action(async function (name) {// 创建项目的逻辑// 将一个名字为name的文件夹，把我们模版项目的代码都放在这个文件夹下面// 先判断有没有名字为name的文件夹// console.log(path.join(process.cwd(), name));const targetPath = path.join(process.cwd(), name);if (fs.existsSync(targetPath)) {// 存在// 询问用户是否确定要覆盖const awsaner = await inquirer.prompt([{type: "confirm",name: "overwrite",message: "文件夹已经存在，是否确定要覆盖",default: false,},]);console.log(awsaner);if (awsaner.overwrite) {// 删除文件夹fs.remove(targetPath);console.log("删除成功");} else {return;}}const res = await inquirer.prompt([{type: "list",name: "type",message: "选择什么框架去创建项目？",choices: [{name: "vue",value: "vue",},{name: "react",value: "react",},],},{type: "list",name: "ts",message: "是否要用ts?",choices: [{name: "是",value: true,},{name: "否",value: false,},],},]);// console.log(res);const key = res.type + (res.ts ? "&ts" : "");const spinner = ora("下载模版中...").start();// console.log(key);// 克隆项目模版gitClone(projectList[key], name, { checkout: "main" }, function (err) {if (err) {console.log(chalk.red("下载失败", err));spinner.fail("下载失败,请稍后重试");} else {spinner.succeed("下载成功");// 删除.gitfs.remove(path.join(targetPath, ".git"));console.log("Done, now run:");console.log(chalk.green(`\n cd ${name}`));console.log(chalk.green(" npm install"));console.log(chalk.green(" npm run dev"));}});});
// 给help添加提示
program.on("--help", () => {console.log(figlet.textSync("KFC-VME50-CLI", {font: "Ghost",horizontalLayout: "default",verticalLayout: "default",width: 80,whitespaceBreak: true,}));
});
// 解析命令行参数
program.parse(process.argv);

{"name": "kfc-vme50-cli","version": "1.0.0","main": "index.js","bin": "/bin/index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"chalk": "^4.0.0","commander": "^14.0.2","figlet": "^1.9.3","fs-extra": "^11.3.2","git-clone": "^0.2.0","inquirer": "^8.0.0","ora": "^5.0.2"}
}

发布自己的npm包

# 查看仓库源地址
npm config get registry 
# 登录
npm login
Username:用户名
Password:密码
Email:注册邮箱
Enter one-time password:一次性密码	邮箱会收到邮件# 发布
npm publish