TS语言自定义脚手架

初始化

• 新建文件夹
• 初始化命令

  npm init -ytsc --initnpm i @types/nodenpm i typescript# 处理别名npm i -D tsc-alias 

-y 表示选项都为yes
安装ts相关依赖

新建相关文件

• bin 文件夹

• src文件夹

  • commands 文件夹 （命令

  • utils 文件夹 (封装方法）

    • index.ts文件

      export * from "./chalk"

  • index.ts 文件

    #! /usr/bin/env node
    console.log('hello gaogao')
    

    #! /usr/bin/env node
    前后不可有空格
    #!用于指定脚本的解释程序，开发npm包这个指令一定要加

• .gitignore 文件

	#basicnode_modulepackage-lock.json#buildbin

• .npmrc 文件

	registry=https://mirrors.huaweicloud.com/repository/npm

TS配置

建【tsconfig.json】

{"compilerOptions": {"target": "ES6","module": "commonjs","outDir": "./bin", // 输出地址 相对路径"baseUrl": "./","strict": true,"moduleResolution": "node","esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true,"resolveJsonModule": true,"paths":{"@":["src"],"@utils":["utils"],}},"include": ["./src","src/**/*.ts","src/**/*.d.ts"]
}

修改【package.json】

bin:执行的文件或命令
scripts-build 处理ts文件

{"name": "gaogao-cli","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "tsc && tsc-alias"},"bin": {"gaogao": "/bin/src/index.js"},"keywords": [],"author": "","license": "ISC","dependencies": {"@types/figlet": "^1.7.0","@types/fs-extra": "^11.0.4","@types/inquirer": "^9.0.7","@types/log-symbols": "^3.0.0","@types/node": "^22.13.2","@types/shelljs": "^0.8.15","chalk": "^4.0.0","commander": "^9.0.0","download-git-repo": "^3.0.2","figlet": "^1.8.0","fs-extra": "^10.0.1","inquirer": "^8.2.1","loading-cli": "^1.1.2","log-symbols": "^4.1.0","ora": "^5.4.1","shelljs": "^0.8.5","table": "^6.9.0","typescript": "^5.7.3"},"devDependencies": {"tsc-alias": "^1.8.10"}
}

测试

ts语言需要先build

npm run build

build后bin文件夹下自动新增index.js文件
验证修改是否生效都需要build

cnpm link
gaogao

安装相关工具

安装固定版本，有些版本会有bug

commander

https://www.npmjs.com/package/commander

• 处理控制台命令工具
• 解析用户输入时一些参数
  • 例如 create 就是利用此工具做解析辅助

cnpm i commander@9.0.0

import {program} from 'commander'
import Pack from "../package.json"
program.version(Pack.version, "-v, --version");
program.parse(process.argv)//nodejs提供的属性

封装常用命令

• commands文件夹下新建create文件夹 文件

import commandCreate from'./create'
// create见 create命令目录
const commands:any = {'create <project-name>':{description:'create a project',option:[{cmd:'-f,--force',msg:'overwrite target directory if it exists'}],action:commandCreate}
}export default commands

import { Command } from "commander";
import Commands from "@commands";
//index.ts
Object.keys(Commands).forEach((command:any) => {const current:any = program.command(command);if (Commands[command].option && Commands[command].option.length) {let options = current.optionCommands[command].option.forEach((item: { cmd: string; msg: any }) => {current.option(item.cmd, item.msg || "");});}current.action(Commands[command].action);
});

chalk 美化工具

• 该模块用于添加颜色和样式到控制台输出

效果见【figlet】

import chalk from 'chalk'
console.log("\r\n" + chalk.greenBright.bold('hello gaogao-cli'))

封装字体处理

import chalk from 'chalk';
export const Cblue= (text:string) =>chalk.blue(text)
export const Cred= (text:string) =>chalk.red(text)
export const Cgreen= (text:string) =>chalk.green(text)

figlet

https://www.npmjs.com/package/figlet

• 该模块用于生成ASCII艺术字

具体字体可以去figlet官网查看

cnpm i figlet@1.5.2 @types/figlet

import chalk from 'chalk'
import figlet from 'figlet'
program.name("gaogao").description("gaogao-cli").usage("<command> [options]")// 用在内置的帮助信息之后输出自定义的额外信息.on("--help", () => {console.log("\r\n" + chalk.greenBright.bold(figlet.textSync("gaogao-cli", {font: "Standard",horizontalLayout: "default",verticalLayout: "default",width: 100,whitespaceBreak: true,})))console.log(`\r\n Run ${chalk.cyanBright(`gaogao-cli <command> --help`)} for detailed usage of given command.`)});

inquirer -命令行交互工具

https://www.npmjs.com/package/inquirer

• 该模块用于实现交互式命令行界面
  • 例如vue询问是否单元测试

cnpm i inquirer@8.2.1 @types/inquirer

封装inquirer

- lib文件夹下`新建interactive.ts `文件

import inquirer from 'inquirer';/*** @param {string} message 询问提示语句* @returns {Object} 根据name属性获取用户输入的值{confirm: y/n}*/
export const inquirerConfirm = async (message:string): Promise<object> => {const answer = await inquirer.prompt({type: "confirm",name: "confirm",message,});return answer;
}/*** * @param {string} name 询问事项* @param {string} message 询问提示语句* @param {Array} choices 选择模板列表，默认读取对象的name属性* @returns {Object} 根据name属性获取用户输入的值{请选择项目模板: xxxxxx}*/
export const inquirerChoose = async (name:string,message:string, choices:Array<any>): Promise<any> => {const answer = await inquirer.prompt({type: 'list',name,message,choices,});return answer;
}/*** @param {Array} messages  询问提示语句数组* @returns {Object} 结果对象*/
export const inquirerInputs = async (messages: Array<any>): Promise<object> => {const questions = messages.map(msg => {return {name: msg.name,type: "input",message: msg.message,}})const answers = await inquirer.prompt(questions);return answers
}

loading-cli

https://www.npmjs.com/package/loading-cli

• utils 下新建loading文件
• 在这里插入代码片

//loading.ts
import loading, { Options, Loading } from "loading-cli";class Load {load: null | Loading;constructor() {this.load = null;}/*** @Descripttion: 开始loading状态* @msg: * @param {Options} options* @return {*}*/  start  (options: Options | string) {if(!this.load){typeof options==='object'&&!options.frames&&(options.frames=['<','<','^','>','>','_','_'])this.load = loading(options).start()}else{this.load.start(options as string)}};stop () {this.load && this.load.stop();};succeed(text='success') {this.load && this.load.succeed(text);};warn(text: string) {this.load && this.load.warn(text);};info (text: string){this.load && this.load.info(text);};
}export default new Load();

// index.tsprogram.command("loading").description("View all available templates").action(() => {loading.start({color: "red",text: "begin",});setTimeout(() => {loading.warn("警告");setTimeout(() => {loading.info("提示");setTimeout(() => {loading.stop();}, 2000);}, 2000);}, 2000);})

fs

https://url.nodejs.cn/api/fs.html

• 该模块用于对文件系统进行更强大的操作。

cnpm i fs-extra@10.0.1  @types/fs-extra

封装文件处理方法

import fs from "fs";import { Cred } from "./chalk";export const readDir = (path: string): Promise<any> =>new Promise((res, rej) => {fs.readdir(path, (err) => {if (!err) res(true);res(false)});});export const mkdir = (path: string): Promise<any> =>new Promise((res, rej) => {fs.mkdir(path, (err) => {if (!err) res("");rej(`${Cred("Can not mak dir")} ${typeof err === "string" ? err : JSON.stringify(err)}`);});});export const rm = (path: string): Promise<any> =>new Promise((res, rej) => {fs.rm(path,{ recursive: true}, (err) => {if (!err) res("");rej(`${Cred("Can not remove dir："+ path)} ${typeof err === "string" ? err : JSON.stringify(err)}`);});});

其他常用工具

# 安装ora模块，该模块用于显示动画加载效果。
cnpm i ora@5.4.1
# 安装download-git-repo模块，该模块用于下载并提取Github/Git(template本地)仓库中的文件。
cnpm i download-git-repo@3.0.2
# 安装handlebars模块，该模块用于处理模板文件。
cnpm i handlebars@4.7.6
# 安装log-symbols模块，该模块用于在控制台输出不同类型的日志符号（√或×）。
cnpm i log-symbols@4.1.0
# 安装axios模块，该模块用于发起HTTP请求。
cnpm i axios@0.26.1
# 安装gitee-repo模块，该模块用于从Gitee仓库中下载模板文件。
cnpm i gitee-repo@0.0.2
# 命令行界面表格内容显示
cnpm i table
# 基于nodejs的shell命令工具
cnpm i shelljs @types/shelljs 
# 在控制台输出不同类型的日志符号（√或×）
cnpm i log-symbols@4.1.0 @types/log-symbols

配置模版文件

• lib文件夹下新建constants.ts 文件

//constants.ts
/*** 项目模板列表*/
export const templates = [{name: "vue-template",value: "direct:https://gitee.com/账号/vue-template.git",desc: "基于vite的自定义vue项目模板",},
];/*** 项目信息*/
export const messages = [{name: "name",message: "请输入项目名称：",},{name: "description",message: "请输入项目描述：",},
];

//index.ts
import { table } from 'table';import { templates } from '../lib/constants'// 查看模板列表
program
.command("ls")
.description("View all available templates")
.action(() => {const data = templates.map(item => [chalk.greenBright(item.name), chalk.white(item.value), chalk.white(item.desc)]);data.unshift([chalk.white("Template name"), chalk.white("Template address"), chalk.white("Template description")]);console.log(table(data));
})

gaogao ls

create命令

create

• commands文件夹下新建create文件夹 文件
  

import fs from "fs-extra";
import ora from "ora";
import inquirer from "inquirer";
import path from "path";
import { exec } from "child_process";
import {readDir,mkdir,rm,Cred,readFile,copyFolder,loading,inquirerChoose
} from "@utils";
import { TempLatesRepo, TempLatesName, templates } from "../../constant/repo";
export default async function (projectName: any, options: any) {const cwd = process.cwd();const targetDirectory = path.join(cwd, projectName);if (fs.existsSync(targetDirectory)) {if (options.force) {// 存在force配置项，直接覆盖await fs.remove(targetDirectory);} else {// 不存在force配置    项，询问是否覆盖let { isOverwrite } = await inquirerChoose("isOverwrite","Target directory exists,Please choose an action.",[{name: "Overwrite",value: true,},{name: "Cancel",value: false,},]);if (!isOverwrite) {console.log("Cancel");return;} else {loading.start(`Removing ${projectName},please wait a minute`);await fs.remove(targetDirectory);loading.stop();}}}const spinner = ora("Creating a project......").start();try {await mkdir(targetDirectory);const TemplatePath = `${process.cwd()}/${TempLatesName}`;if (await readDir(TemplatePath)) {spinner.fail(Cred(`${TempLatesName} is existed!Please remove it`));process.abort();}spinner.stop()//下载模版git//TempLatesRepo  模版git地址exec(`git clone ${TempLatesRepo}`, async (err) => {if(err){spinner.fail(Cred("can not clone this repo,please try again later!"));spinner.fail(Cred(typeof err === "string" ? err : JSON.stringify(err)));process.abort();}const project =await readFile( `${TemplatePath}/project.json`)//读取模版工程中project.json文件。存放模版listconst question = [{type: "list",message: "Please select a project template：",name: "template",choices: JSON.parse(project),// string[]},];const { template } = await inquirer.prompt(question);const newPath = targetDirectory;const oldPath = TemplatePath + "/" + template;loading.start("Template generation...");await copyFolder(oldPath, newPath);// 删除克隆模板await rm(TemplatePath);loading.stop()});} catch (err) {console.log(Cred("Project creation failure"));spinner.fail(Cred(typeof err === "string" ? err : JSON.stringify(err)));process.abort();}
}

• 创建项目
  
• 选择模版