交互式命令

更多文章

前言

前段时间为公司做了ui组件平台，主要是开发业务组件，跟基础组件不同的是一个业务组件可能就是一个基础页面，随之引出的就有快速创建模板的功能，当然其实能做的不单单是创建模板，小伙伴了解后可以自己做更多的功能

准备工作

npm init这些基础操作这里不在多说了，直接进入正题啊

bin

在package.json中配置bin，这里是你的脚本执行的入口文件，也是执行命令的配置项

// 入口文件是bin/index.js，命令是test-cli
"bin": {
    "test-cli": "./bin/index.js"
}

link

npm link是将本地项目和npm模块之间建立起联系，在项目下执行npm link后就可以使用test-cli命令，通常本地测试时使用

window中通常在C:\Users\lenovo\AppData\Roaming\npm可以看到对应的命令，包括你安装的yarn、vue-cli等等，所以你可以到该文件下看你的命令是否安装成功

// 项目下执行
npm link

完成上述准备工作后你可以在bin/index.js下写如下代码测试一下

// bin/index.js
#!/usr/bin/env node

console.log('I am test')

cmd中执行效果如下：

$ test-cli

I am test

说明我们的脚本执行了，接下来完善我们的功能

工具

commander

commander可以帮我们解析命令中的参数

// 安装
cnpm install commander --save
// 使用
const { program } = require('commander');
// 输出版本，获取package.json中的版本
program
  .version(require('../package').version, '-v, --version', 'test-cli的最新版本')
// 输出帮助
program
  .option('-h, --help', 'output help')
  .action(optionsHandle) // optionsHandle是我们对应的处理
// 解析参数
program.parse(process.argv) // process.argv中存储这我们命令后的参数，如：vue --version，vue -h中的version和h都是参数

看一下optionsHandle：

// chalk是一个命令行颜色工具
// 这里的处理是没有任何参数或者参数为h或help时打印相应的说明
const chalk = require('chalk');

const outPutHelp = () => console.log([
  '',
  'options:',
  '  -v, --version         output version',
  '  -h, --help            output help',
  'commands:',
  '  ptoh <entry> <output>          pug to html, entry & output is [name].vue',
  '  create <fileName>             create template'
].join('\n'))

module.exports = (options) => {
  const { help } = options
  const { length } = Object.keys(options)
  if (!length) console.log(chalk.yellow('Please enter the correct format\n'))
  if (help || !length) outPutHelp()
}

至此commander已经有了简单的了解，稍后继续我们的功能，更多功能

inquirer

inquirer是另一个比较重要的工具，可以让脚本和使用者产生交互，如vue-cli脚手架安装项目时会让你选择是否使用ts、使用scss还是less等等都是一种交互，查看更多

// 安装
cnpm install inquirer --save
// 使用
const inquirer = require('inquirer');
// 交互数据
const data = [
  {
    type: 'list',
    name: 'type',
    message: '请选择模板类型',
    choices: [
      { name: 'html' },
      { name: 'pug' }
    ],
    default: 'pug'
  },
  {
    type: 'list',
    name: 'name',
    message: '请选择模板',
    choices: [
      { name: 'pageSearch', getSource: getPageSearch },
      { name: 'table', getSource: getTable }
    ],
    default: 'pageSearch'
  }
]
// 此处type、name对应我们选择的选项，而后根据type、name做相应处理
const { type, name } = await inquirer.prompt(prompList)

download-git-repo

download-git-repo帮助从远程git或者gitlab拉取代码放入指定文件夹中，查看更多

// 安装
cnpm install download-git-repo --save
// 使用
const download = require('download-git-repo');
// quickUrl为url地址，需要按照文档填写，随意填写是无法拉取代码
download(quickUrl, name, { clone: true }, function (error) {
  if (error) {
    spinner.fail(chalk.red(`error: ${error}`))
  } else {
    spinner.succeed(chalk.green(`download success !`))
  }
})

锦上添花

以上3个是比较重要的工具，涉及到我们的流程，接下来介绍一些锦上添花的工具

chalk

chalk可以为我们命令添加颜色，使用比较简单，如下，更多查看

const chalk = require('chalk');
console.log(chalk.red('test'))

ora

ora主要是添加loading效果，z对于一些时间较长的操作，可以让使用者了解当前任务现状，使用也比较简单，更多查看

const chalk = require('chalk');
const ora = require('ora');

const spinner = ora('downing...');
spinner.start()
setTimeout(() => {
  spinner.succeed(chalk.green(`down success !`))
}, 1000)

figlet

figlet可以输出不同字体的文案，查看更多

const figlet = require('figlet');

figlet('q-cli', { font: 'Ghost' }, function (err, data) { })

cmd执行效果下：

$ qc -h
     .-')
   .(  OO)
  (_)---\_)           .-----. ,--.      ,-.-')
  '  .-.  '   .-')   '  .--./ |  |.-')  |  |OO)
 ,|  | |  | _(  OO)  |  |('-. |  | OO ) |  |  \
(_|  | |  |(,------./_) |OO  )|  |`-' | |  |(_/
  |  | |  | '------'||  |`-'|(|  '---.',|  |_.'
  '  '-'  '-.      (_'  '--'\ |      |(_|  |
   `-----'--'         `-----' `------'  `--'

options:
  -v, --version         output version
  -h, --help            output help
commands:
  ptoh <entry> <output>          pug to html, entry & output is [name].vue
  create <fileName>             create template

ok至此已经介绍的差不多了，其他的伙伴们可以去看vue-cli了解更多的知识

axw-cli

这里简单介绍一下axw-cli功能，github

介绍

提升开发效率，将一些工具集成到axw-cli中

安装

npm install axw-cli -g

帮助

$ axw -h

   ('-.    ) (`-.       (`\ .-') /`
  ( OO ).-. ( OO ).      `.( OO ),'
  / . --. /(_/.  \_)-.,--./  .--.             .-----. ,--.      ,-.-')  
  | \-.  \  \  `.'  / |      |  |     .-')   '  .--./ |  |.-')  |  |OO) 
.-'-'  |  |  \     /\ |  |   |  |,  _(  OO)  |  |('-. |  | OO ) |  |  \ 
 \| |_.'  |   \   \ | |  |.'.|  |_)(,------./_) |OO  )|  |`-' | |  |(_/ 
  |  .-.  |  .'    \_)|         |   '------'||  |`-'|(|  '---.',|  |_.' 
  |  | |  | /  .'.  \ |   ,'.   |          (_'  '--'\ |      |(_|  |    
  `--' `--''--'   '--''--'   '--'             `-----' `------'  `--'    

options:
  -v, --version         output version
  -h, --help            output help
commands:
  ptoh <entry> <output>          pug to html, entry & output is [name].vue
  create <fileName>              create template
  init <name>                    pull code to folder

版本

$ axw -v

1.0.3

pug转为html

$ axw ptoh entry.vue output.vue

read...0%
read...96.43%
read over
pug doing...
pug done
writing...
write over
√ pug to html success !

创建模板

$ axw create index.vue

? 请选择模板类型 (Use arrow keys)
? 请选择模板类型 pug
? 请选择模板 (Use arrow keys)
? 请选择模板 pageSearch
- creating...
√ create pageSearch success !

拉取代码

axw init demo

结语

逆水行舟！