Quiet
  • 主页
  • 归档
  • 分类
  • 标签
  • 链接
  • 关于我

bajiu

  • 主页
  • 归档
  • 分类
  • 标签
  • 链接
  • 关于我
Quiet主题
  • 前端工程化

NodeJs 搭建属于自己的命令行界面(cli)工具

bajiu
前端

2021-05-06 16:16:03

Command Line Interface 也就是我们所熟知的cli, 可以让我们快速简单的完成基础劳动, 一般工作中的cli工具主要有以下几个功能:

  • 快速生成应用模板,如vue-cli等根据与开发者的一些交互式问答生成应用框架
  • 创建module模板文件,如angular-cli,创建component,module;sequelize-cli 创建与mysql表映射的model等
    服务启动,如ng serve
  • eslint,代码校验,如vue,angular,基本都具备此功能
  • 自动化测试 如vue,angular,基本都具备此功能
  • 编译build,如vue,angular,基本都具备此功能
  • 编译分析,利用webpack插件进行分析
  • git操作
  • 生成的代码上传CDN
  • 还可以是小工具用途的功能,如http请求api、图片压缩、生成雪碧图等等,只要你想做的都能做

下面介绍一下nodeJs制作cli的常用工具:

Inquirer.js 交互式命令行工具

命令行界面工具:

yarn add inquirer

例子:

const inquirer = require('inquirer')
inquirer.prompt([
    {
        type: 'input',
        name: 'answer',
        message: '获取用户输入字符串',
        default: "没用的默认值"
    }
]).then((data) => {
    console.log('结果为:')
    console.log(data)
})

Prompt types —— 问题类型

  • {type: 'list'}

问题对象中必须有type,name,message,choices等属性,同时,default选项必须为默认值在choices数组中的位置索引(Boolean)

  • {type: 'rawlist'}

与List类型类似,不同在于,list打印出来为无序列表,而rawlist打印为有序列

  • {type: 'expand'}

同样是生成列表,但是在choices属性中需要增加一个属性:key,这个属性用于快速选择问题的答案。类似于alias或者shorthand的东西。同时这个属性值必须为一个小写字母

  • {type: 'checkbox'}

其余诸项与list类似,主要区别在于,是以一个checkbox的形式进行选择。同时在choices数组中,带有checked: true属性的选项为默认值。

  • {type: 'confirm'}

提问,回答为Y/N。若有default属性,则属性值应为Boolean类型

  • {type: 'input'}

获取用户输入字符串

  • {type: 'password'}

与input类型类似,只是用户输入在命令行中呈现为XXXX

  • {type: 'editor'}

终端打开用户默认编辑器,如vim,notepad。并将用户输入的文本传回

Commander.js

yarn add inquirer
// 引入依赖
var program = require('commander');

// 定义版本和参数选项
program
  .version('0.1.0', '-v, --version', '版本')
  .option('-i, --init', '初始化')
  .option('-g, --generate', '构建')
  .option('-r, --remove', '删除')
  .option('-h, --help', '帮助');

program.parse(process.argv);

if(program.init) {
  console.log('init something')
}

if(program.generate) {
  console.log('generate something')
}

if(program.remove) {
  console.log('remove something')
}


ora 终端加载动画效果

一个优雅的终端微调器

yarn add ora

使用:

const ora = require('ora');

const spinner = ora('Loading unicorns').start();

setTimeout(() => {
    spinner.color = 'yellow';
    spinner.text = 'Loading rainbows';
}, 1000);

chalk 修改控制台中字符串的样式

样式修改包括

  • 字体样式(加粗、隐藏等)
  • 字体颜色
  • 背景颜色
yarn add chalk

chalk 支持两种方式使用: 常规的调用方式和模板中使用的方式。

  1. 常规使用
const chalk = require('chalk');

console.log(chalk.red.bold.bgWhite('Hello World'));

console.log(chalk.rgb(255,0,0).bold.bgRgb(255,255,255)('Hello World'));
  1. 模版使用
const chalk = require('chalk');
console.log(chalk`{red.bold.bgWhite Hello World}`);

console.log(chalk`{rgb(255,0,0).bold.bgRgb(255,255,255) Hello World}`);

四个基本的命令加上emoji就能弄一个像样的自己的cli工具辣

文档链接:

  1. inquirer
  2. Commander
  3. ora
  4. chalk
上一篇

BFC与Grid布局

下一篇

面试题收集01

©2025 By bajiu.