经常使用create-react-app作为命令行生成项目，总想着自己能配置一个属于自己的命令行工具，很酷炫的样子。最近有时间，终于来实现了

初始化项目

1
2
mkdir y-cli && cd y-cli
npm init -y

新建一个文件 ./bin/yyt.js，并写一点简单的东西 

1
2
3
4
// 这里告诉系统要以node环境执行：
#!/usr/bin/env node

console.log('hello,node cli!')

再在 package.json 里添加 bin 配置，需要指定一个自定义命令，如 y-cli

1
2
3
"bin": {
  "y-cli": "./bin/yyt.js"
}

在命令行里运行：

1
2
3
npm link
# 或者在全局install：
npm install . -g

可以看到如下，npm将命令作为软链接连接至对应的js文件

1
2
3
4
5
6
7
8
9
xxx@xxxMBP y-cli % sudo npm link
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

up to date in 0.832s
found 0 vulnerabilities

/usr/local/bin/yyt -> /usr/local/lib/node_modules/y-cli/bin/yyt.js
/usr/local/lib/node_modules/y-cli -> /Users/xxx/Documents/code/y-cli

所用到的库

cli需要获取用户的输入，选择并做相应的事情，就需要使用到一些库来帮忙我们更方便的写cli

核心：

  • commander - 处理核心命令 主要模块，在终端输出各种信息全靠这个模块
  • download-git-repo - 下载git模块

美化：

  • chalk  —  美化终端字符显示
  • figlet  —  在终端输出大型字符
  • inquirer  —  命令行参数输入交互
  • shelljs  —  在js文件写命令行
  • ora - 实行loading效果

让我们来把这些库全部安装一遍

commander

根据commander文档的一些参数，我们来编写脚本 yyt.js

1
2
3
4
5
6
7
8
#!/usr/bin/env node
const program = require('commander')

// 获取package.json中的版本信息
program.version(require("../package.json").version)

// 解析指令，这点很重要  不解析指令则无效
program.parse(process.argv)

commander自带 -V 和 -h 两个命令，运行 yyt -h可看到：

1
2
3
4
5
6
xxx@xxxdeMacBook-Pro y-cli % yyt -h
Usage: yyt [options]

Options:
  -V, --version  output the version number
  -h, --help     display help for command

.option() 加入自定义命令

1
program.option('-d, --description', 'yyt 脚手架简介：。。。。')

可以发现已经加上该命令：

1
2
3
4
5
6
7
xxx@xxxdeMacBook-Pro y-cli % yyt -h
Usage: yyt [options]

Options:
  -V, --version      output the version number
  -d, --description  yyt 脚手架简介：。。。。
  -h, --help         display help for command

.command() 自定义命令，

基础格式：

1
program.option('hello <param1> [param2]')

值得注意的是，尖括号<>里的参数是必填参数，方括号[]里的参数是可选参数

利用.command()写一个简单的demo，弄清整个基础流程：

1
2
3
4
5
6
7
8
9
program
	.command('hello <param1> [param2]')
  // 命令里利用.usage()参数化，供后面的.action()回调使用：
	.usage('<command> <param1> [param2]')
  // 回调处理：
	.action((param1, param2)=>{
		console.log(param1);
		console.log(param2);
	})
1
2
3
4
5
6
7
8
ziyouzhiyi@ziyouzhiyideMacBook-Pro y-cli % yyt hello
error: missing required argument 'param1'
ziyouzhiyi@ziyouzhiyideMacBook-Pro y-cli % yyt hello t 
t
undefined
ziyouzhiyi@ziyouzhiyideMacBook-Pro y-cli % yyt hello t y
t
y

上面这些参数也可通过.option()来实现，但需要加上-，如-react，如以下的例子，利用参数创建项目：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
program.command('create <projectName>')
	.option('-react')
	.option('-vue')
	.action((projectName, option) => {
		const type = Object.keys(option)[0]
		switch(type) {
			case "Vue":
				console.log("创建vue项目")
				break;
			case "React":
				console.log("创建react项目")
				break;
			default:
				console.log("未添加参数，不能下载")
		}
	})

执行命令后可以看到打印：

1
2
ziyouzhiyi@ziyouzhiyideMacBook-Pro y-cli % yyt create test -react
创建react项目

download-git-repo

下载的步骤把他替换成真的仓库，需要用到 download-git-repo 库

把console.log替换成真实的git仓库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
  case "React":
    download(
			// 此处应加上 #main 分支名称，否则控制台会显示报错
      'direct:[email protected]:ys558/yyt-template.git#main',
      projectName,
      { clone: true },
      (err, x) => {
        // 错误回调：
        if (err) console.log(err)
        console.log(`${projectName} 项目创建成功`)
      }
    )
    break;
  default:
    console.log("未添加参数，不能下载")
...

inquirer

👆的步骤下载的仓库是在命令行下直接完成的，如果要像vue一样能让用户输入生成的，可以用该库，我们把代码改造一下，实际上就是在 .action() 的回调中进行处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const questions = [
	{
		type: 'input',
		name: 'projectName',
		message: '请输入项目名称',
	},
	{
		type: 'list',
		name: 'frameWork',
		message: '请选择框架',
		default: 'React',
		choices: ['React','Vue']
	},
]

program
	.command('create')
	.action(() => {
		inquirer.prompt(questions)
			.then(({projectName, frameWork}) => {
				switch (frameWork) {
					case 'React':
						download(
							'direct:[email protected]:ys558/yyt-template.git',
							projectName,
							{ clone: true },
							(err) => {
								// 错误回调：
								if (err) {
									console.log(err)
									return
								}else{
									console.log(`${projectName} 项目创建成功`)
								}
							})
						break;
					case 'Vue':
						download(
							'direct:[email protected]:ys558/yyt-template.git',
							projectName,
							{ clone: true },
							(err) => {
								// 错误回调：
								if (err) {
									console.log(err)
									return
								}else{
									console.log(`${projectName} 项目创建成功`)
								}
							})
						break;
					default:
						break;
				}
			})
	})

美化

chalk，figlet

美化终端字体，如 chalk:

1
2
3
4
5
6
if (err) {
	console.log(chalk.bgYellow(err))
	return
}else{
	console.log(`${chalk.bgGrey(projectName)} ${chalk.greenBright('项目创建成功')}`)
}

figlet:

1
2
3
4
figlet.defaults({font: 'Standard'})
function logo(){
	console.log(figlet.textSync('hi yyt!'))
}

ora

这是一个比较麻烦的模块，他是 es module 类型的import导入模块，而 node 用的是commonjs 的 require 导入模块，而且须在 package.json 里添加 { "type" : "module" } 才能正常加载，下面贴上相关代码：

1
2
3
4
5
6

const spinner = ora("下载初始化模板中...")
spinner.start()
spinner.succeed(`${chalk.bgGrey(projectName)} ${chalk.greenBright('项目创建成功')}`)
spinner.stop()

完整代码仓库

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~