随着网站工程的复杂化,我们不希望把有限的时间浪费到一些诸如文件复制,打包配置等重复的工作上,我们希望在创建新的项目工程时可以使用模板直接初始化项目,这对于效率和团队使用是比较方便的。对于前端工程化而言,模板的封装许多是基于cli,这时候就要用到commander库,进而简化cli。
commander简单总结:
//添加命令:
myCommand
.command('init')
//命令添加选项:
.option('-y', 'use the default settings')
myCommand
//添加描述:
.description('init webpack config or boilerplate for Vue/React/Weex')
//添加执行:
.action(options => {
console.log(`${chalk.green(options.devtool)}`)
});
//添加版本号:
.version('0.0.1', '-v, --version')
//添加参数解析:
.parse(process.argv)
command的几中模式
var program = require('commander');
program
.version('0.1.0')
.option('-C, --chdir <path>', 'change the working directory')
.option('-c, --config <path>', 'set config path. defaults to ./deploy.conf')
.option('-T, --no-tests', 'ignore test hook');
program
.command('setup [env]')
.description('run setup commands for all envs')
.option("-s, --setup_mode [mode]", "Which setup mode to use")
.action(function(env, options){
var mode = options.setup_mode || "normal";
env = env || 'all';
console.log('setup for %s env(s) with %s mode', env, mode);
});
program
.command('exec <cmd>')
.alias('ex')
.description('execute the given remote cmd')
.option("-e, --exec_mode <mode>", "Which exec mode to use")
.action(function(cmd, options){
console.log('exec "%s" using %s mode', cmd, options.exec_mode);
}).on('--help', function() {
console.log('');
console.log('Examples:');
console.log('');
console.log(' $ deploy exec sequential');
console.log(' $ deploy exec async');
});
program
.command('*')
.action(function(env){
console.log('deploying "%s"', env);
});
program.parse(process.argv);
添加操作
program.on('option:verbose', function () {
process.env.VERBOSE = this.verbose;
});
// error on unknown commands
program.on('command:*', function () {
console.error('Invalid command: %s\nSee --help for a list of available commands.', program.args.join(' '));
process.exit(1);
});
program.on('--help', function(){
console.log('')
console.log('Examples:');
console.log(' $ custom-help --help');
console.log(' $ custom-help -h');
});
配合inquirer使用:
{
// 表示提问的类型,下文会单独解释
//可能值:list|rawlist|expand|checkbox|confirm|input|password|editor
type: String,
// 在最后获取到的answers回答对象中,作为当前这个问题的键
name: String,
// 打印出来的问题标题,如果为函数的话
message: String|Function,
// 用户不输入回答时,问题的默认值。或者使用函数来return一个默认值。
//假如为函数时,函数第一个参数为当前问题的输入答案。
default: String|Number|Array|Function,
// 给出一个选择的列表,假如是一个函数的话,第一个参数为当前问题的输入答案。
//为数组时,数组的每个元素可以为基本类型中的值。
choices: Array|Function,
// 接受用户输入,并且当值合法时,函数返回true。
//当函数返回false时,一个默认的错误信息会被提供给用户。
validate: Function,
// 接受用户输入并且将值转化后返回填充入最后的answers对象内。
filter: Function,
// 接受当前用户输入的answers对象,并且通过返回true或者false来决定是否当前的问题应该去问。
//也可以是简单类型的值。
when: Function|Boolean,
// 改变渲染list,rawlist,expand或者checkbox时的行数的长度。
pageSize: Number,
}
inquirer问题类型:
//问题对象中必须有type,name,message,choices等属性,
//同时,default选项必须为默认值在choices数组中的位置索引(Boolean)
List{type: 'list'}
//与List类型类似,不同在于,list打印出来为无序列表,而rawlist打印为有序列表
Raw list {type: 'rawlist'}
//同样是生成列表,但是在choices属性中需要增加一个属性:key,这个属性用于快速选择问题的答案。
//类似于alias或者shorthand的东西。同时这个属性值必须为一个小写字母
Expand{type: 'expand'}
//其余诸项与list类似,主要区别在于,是以一个checkbox的形式进行选择。
//同时在choices数组中,带有checked: true属性的选项为默认值。
Checkbox{type: 'checkbox'}
//提问,回答为Y/N。若有default属性,则属性值应为Boolean类型
Confirm{type: 'confirm'}
//获取用户输入字符串
Input{type: 'input'}
//与input类型类似,只是用户输入在命令行中呈现为XXXX
Password{type: 'password'}
//终端打开用户默认编辑器,如vim,notepad。并将用户输入的文本传回
Editor{type: 'editor'}
react项目脚手架地址:generate-react-template-cli(更新中)
转载自原文链接, 如需删除请联系管理员。
原文链接:commander库的作用和简单总结,转载请注明来源!