1、依赖项安装 (初始化 略过)
//commander download-git-repo chalk
安装
npm i commander download-git-repo chalk
2、 添加入口文件
package.json 文件
"bin":{
// 命令 :入口文件
"ck":"./bin/cli.js"
}
在 bin 文件下创建 cli.js 文件 顶部 加入下面这行
#!/usr/bin/env node
建好后可以 npm link 一下
执行定义的ck 指令
hello world 执行成功
3、添加commander 命令行
const { program } = require('commander');
program.parse(); // 解析
4、描述信息
const { program } = require('commander');
// 名称,描述,版本号,用法提示。
program
.name('cli')
.description('这是一个脚手架')
.version('0.0.1')
.usage('<command> [options]');
program.parse();
5、创建指令create
const { program } = require('commander');
// 名称,描述,版本号,用法提示。
program
.name('cli')
.description('这是一个的脚手架')
.version('0.0.1')
.usage('<command> [options]');
// 创建 create 命令
program.command('create <app-name>')
.option('-f, --force', 'overwrite target directory if it exist')
.option('-g, --get <path>', 'get value from option')
.option('-s, --set <path> <value>')
.option('-d, --delete <path>', 'delete option from config')
.action((name, options) => {
// 打印执行结果
require('../lib/create.js')(name,options)
console.log('name:',name,'options:',options)
})
program.parse();
验证指令执行结果
6、chalk 命令行美化工具
program
// 配置版本号信息
.version(`v${require('../package.json').version}`)
.on('--help', () => {
// 新增说明信息
console.log(`\r\nRun ${chalk.cyan(`zr <command> --help`)} for detailed usage of given command\r\n`)
console.log('\r\n' + figlet.textSync('t - e - s - t', {
font: 'Ghost',
horizontalLayout: 'default',
verticalLayout: 'default',
width: 80,
whitespaceBreak: true
}));
})
.usage('<command> [option]')
验证
7、inquirer 交互式命令行工具
1、交互式命令行界面。提供了询问操作者问题,获取并解析用户输入,多层级的提示,提供错误回调,检测用户回答是否合法等能力。
安装:npm install inquirer@8.2.5
2、使用
const inquirer = require('inquirer')
const arr = [
{
type: 'input',
name: 'projectName',
message: '项目名称',
default: 'vue-demo',
},
{
type: 'list',
name: 'projectType',
message: '项目类型',
default: 'vue2',
choices: [
{ name: 'vue2', value: 'vue2' },
{ name: 'vue3', value: 'vue3' },
{ name: 'react', value: 'react' }
]
},
{
type: 'checkbox',
name: 'plugins',
message: '插件选择',
choices: [
{ name: 'babel', value: 'babel' },
{ name: 'eslint', value: 'eslint' },
{ name: 'vue-router', value: 'vue-router' }
]
},
{
type: 'confirm',
name: 'confirm',
message: 'confirm',
}
];
inquirer.prompt(arr).then(answers => {
console.log('==============');
console.log(answers);
}).catch(error => {
console.log('--------------')
console.log(error)
})
验证交互式命令
8、根据选中结果 下载对应模板
这部分需求;我们业务上再基础框架配置了较多的业务处理方法 这里直接使用模板的方式。
download-git-repo 下载远程模板