前言

天天喊着CLI，那CLI到底是个啥？？来来来，一起拼个单词，Command-Line Interface，翻译过来，叫命令行界面，也称为 CUI，字符用户界面。

command-line组成

command [subCommand] [options] [arguments]

• command:命令，比如 vue
• [subCommand]:子命令，比如 vue create
• [options]:选项，配置，同一个命令不同选项会有不一样的操作结果，比如 vue -h，vue -v

- 选项一般会有全拼与简写形式(具体看使用的命令帮 助)，比如 --version = -v
    全拼:以 -- 开头 / 简写:以 - 开头
    
- 多个简写的选项可以连写，开头使用一个 - 即可；
- 选项也可以接受值，值写在选项之后，通过空格分隔。
需要注意的是，如果有接受值的选项需要放在最后，比如：
vue create -d -r <-r的值> myApp
vue create -dr <-r的值> myApp

- 若多个简写的选项中每个都有自己的接受值就不能连写。

• [arguments]:参数，某些命令需要使用的值，比如 vue create myApp

选项与参数的区别:
    选项是命令内置实现，用户进行选择，
    参数一般是用户决定传入的值

强化ls

简化命令去除 node。
借助系统脚本批处理 (windows 下 bat脚本) 命令行直接你输入q(q.cmd 省略) ，就会执行node q.js

# q.cmd 脚本内容
@IF EXIST "%~dp0\node.exe" ( 
    "%~dp0\node.exe" "%~dp0\ls\q.js" %*
) ELSE (
    @SETLOCAL
    @SET PATHEXT=%PATHEXT:;.JS;=;% 
    node "%~dp0\ls\q.js" %*
)

第三方框架

• commander 命令行开发工具
• chalk 命令行样式风格控制器
• inquirer 交互式命令行工具

commander

.parse(argv: string[])

解析执行传入的 argv 命令字符串，通常该命令字符串来自用户在命令行的输入，process.argv。
commander 同时会默认创建一个 -h, --help 的

commander.parse( process.argv );

.version(str, flags?)

设置版本信息，该方法会自动为命令注册一个 -V, --version的 option

• str:版本号
• flags:指定的 option选项，默认为:”-V, -- version” //默认 大写的V(Vue也是如此)

设置当前命令的版本
commander.version('v1.0.0', '-v, --version');

.option(flags, description?, fn?, defaultValue?)

设置命令选项

• flags:选项配置标记名称，-n, --name [val]
• description:选项使用说明,
• fn:默认值，函数返回值为defaultValue，优先级 高于defaultValue
• defaultValue:选项默认值，如果需要的话 option就是一个参数(非多个)(选项)

option('-p, --path <path>')

console.log(commander.path)

设置其他option，--name 后面的 [val] 是当前这个选项的参数值

[]表示可选，<>表示必填
设置成功以后，会在命令commander对象下增加一个与全局的同名的属性

如果第三个参数是一个函数的话，那么该函数会接受来自用户输入的值,并返回一个值作为 最后这个选项实际的值。

commander.option('-n, --name [val]', '设置名称', function(val) { console.log(val);
return val.toUpperCase();

});
//console.log( commander.name );

以列表的形式显示，如果选项配置不接收用户输入的值，那么这个选项 将以boolean的形式提供给后面命令使用

commander.option('-l, --list', '以列表的形式显示');

命令行:node ls -l //会在commander对象下添加list: true

选项配置属性 设置其他option，--name 后面的 [val] 是当前这个选项的参数值

.action(fn)

指定命令要执行的动作行为, 在action的回调函数的参数列表中就是command定义的参数。 该函数执行过程会接收到至少一个参数(默认 commander实例)，如果命令中带有参数，则是对应的参数列表，参数的最后一个永远都是 commander 实例

commander.action(() => {
    // 设置命令的动作 
    console.log('Hello ' + commander.name);
});

.command(name, desc?, opts?)

子命令

• name:命令的名称，也可以接受值 'create [appName]'
• desc:简介
• opts:配置

const subCommand = commander.command('create <a> <b> <c>'); 
// 在action的回调函数的参数列表中就是command定义的参数 
subCommand.action( (v1, v2, v3) => {
    console.log(v1, v2, v3); 
});

.description(str)

命令描述 .description('创建项目')

.alias(str)

设置命令别名 .alias('c')

.usage(str)

设置或获取当前命令的使用说明 .usage('使用说明')

chalk

安装

npm i chalk / yarn add chalk

使用

const chalk = require('chalk')

得到一个 chalk 对象，通过这个对象，我们就可以给控制台中的文字加上各种样式了，就像css一样.

chalk.<style>[.<style>...](string, [string...])

Styles

• Modifiers 文字修饰:italic、bold、underline // 文字的修饰:斜体，加粗在windows下(cmd)下支持不是特别的好

• Colors 文字颜色:red、green、yellow、 blue、cyan (写好的颜色有限)\

.hex('#DEADED')
.keyword('orange')
.rgb(15, 100, 204)

• Background colors 背景颜色:bgRed、 bgGreen、bgYellow、bgBlue、bgCyan

.bgHex('#DEADED') .bgKeyword('orange') .bgRgb(15, 100, 204)

console.log(chalk.bold.red.bgGreen('Hello world!') + ' miaov');

inquirer

交互式命令，按questions顺序提问用户，收集用户 输入数据到answers对象中。 提问用户，与用户进行命令行的交互

安装&使用

npm i inquirer 
require('inquirer')

基本概念

• quesitons // 交互提问, 设置需要交互的内容，例如 输入， 选择等
• answers // 处理回答，设置处理函数

inquirer.prompt(questions).then(answers=>{
    ...
})

QUESITONS 提问配置

• type 问题类型
• name 数据属性
• message 提示信息
• default 默认值
• choices 选项列表
• validate 校验函数
• filter 多虑器
• transformer 转换器

问题类型

• input 输入

  inquirer.prompt([
      {
          type: 'input',
          name: 'address',
          message: '地址',
      }  
  ])
  
  
    {
      type: 'input',
  
      name: 'username',\
      message: '请输入你的应用名称',\
      default: 'app',\
      validate(val) { // 对用户输入的数据或选择的数据进行验证
          if (val.trim() === '') { return '应用名称不能为空'; } }, 
          return true;
      },
      filter(val) { // 对用户输入的数据或选择的数据进行过滤 } 
          return val.toLowerCase();
      }
     },
  

• number 数字

  {
      type: 'number',
      name: 'phone',
      message: '手机号'
  }
  

• confirm 是否选择 (y/n)

  {
    type: 'confirm',
      name: 'out',
      message: '是否退出'
  }
  
  // y: 返回 true, n: 返回 false
  

• list 选择列表

  {
      type: 'list',
      name: 'phone',
      message: '选择手机品牌',
          choices: [
              { name: '小米', value: 'mi' },
              { name: '华为', value: 'huawei' },
              { name: '苹果', value: 'apple' }
          ]
  

• rawlist 带编号的选择列表

  {
      type: 'rawlist',
      name: 'num',
      message: '编号',
      choices: [
          { name: '1', value: 1 },
          { name: '2', value: 2 }
      ],
      default: 0 // 默认值为列表项编号，起始为 0
      
  }
  

• expand 带缩写选择列表

  {
      type: 'expand',
      name: 'lang',
      message: "语言",
      choices: [
        { key: 'j', name: 'javascript', value: 1 },
          { key: 'h', name: 'html', value: ２ }
      ]
  }
  

• checkbox 多选

    {
          type: 'checkbox',
          name: 'lang',
          message: '语言',
          choices: [
  
              { name: 'javascript', value: 1 },
              { name: 'php', value: 2 },
              { name: 'go', value: 3 },
              
          ],
      }
  

• password 密码

  {
      type: 'password',
      name: 'pw',
      message: '密码',
  }
  

• editor 文本编辑器

  {
      type: 'editor',
      name: 'content',
      message: '内容'
  }