实现 CLI 常用工具包 - 终端交互相关（问卷、彩色文字、loading、进度条）

爆肝日更  前端面试  前端工程化

👆  点击上方卡片关注

本文介绍在实现 CLI 中常用的一些终端交互相关的四个工具包，如果你需要实现一个 CLI，这几个工具包必不可少。你只需要将他们组合一下，然后实现你的业务逻辑即可。

inquirer

https://github.com/SBoudrias/Inquirer.js^[1]

功能：用户和命令行交互(问卷)，获取结果。

Demo

代码

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

inquirer
  .prompt([
    {
      type: 'input',
      name: 'name',
      message: '请输入你的姓名',
    },
    {
      type: 'list',
      name: 'sex',
      message: '请选择你的性别',
      choices: ['男', '女'],
    },
    {
      type: 'checkbox',
      name: 'like',
      message: '请选择你的爱好',
      choices: ['写代码', '打游戏', '打篮球', '逛抖音'],
    },
  ])
  .then(answers => {
    const { name, sex, like } = answers;
    console.log('---- 个人信息 ----');
    console.log(chalk.green('姓名: '), name);
    console.log(chalk.green('性别: '), sex);
    console.log(chalk.green('爱好: '), like.join(', '));
  });

chalk

https://github.com/chalk/chalk^[2]

功能：在终端输出彩色文字。

Demo

代码

一般在实际 CLI 实现中，我们会封装一个 log 工具函数，导出 success / error / warning  等方法，在不同实际去执行，分别输出绿色、红色、黄色的信息，代码大致如下：

// 封装
const chalk = require('chalk');

const success = msg => {
  console.log(chalk.green(`✔ ${msg}`));
};

const error = msg => {
  console.log(chalk.red(`× ${msg}`));
};

const warning = msg => {
  console.log(chalk.yellow(`⚠️ ${msg}`));
};

module.exports = {
 success,
  warning,
  error
};

// 使用
const log = require('./log');

log.success('成功!!!');
log.warning('警告!!!');
log.error('失败!!!');

ora

https://github.com/sindresorhus/ora^[3]

功能：在终端中显示 loading 动画图标。

Demo

代码

一般在实际 CLI 实现中，会封装一个 spinner 工具函数，导出 start / stop  / success / error 等方法，在业务逻辑中调用异步方法是就可以使用 spinner loading 等待。

// 封装
const ora = require('ora');
const chalk = require('chalk');

const spinner = ora();

const start = msg => {
  spinner.text = chalk.blue(msg);
  spinner.start();
};

const success = msg => {
  spinner.stopAndPersist({
    symbol: chalk.green('✔'),
    text: chalk.green(msg),
  });
};

const stop = () => {
  spinner.stop();
};

const error = msg => {
  spinner.fail(chalk.red(msg));
};

module.exports = {
  start,
  stop,
  success,
  error,
};

// 使用
const spinner from './spinner';

spinner.start('Loading...');

setTimeout(() => {
  spinner.success('Load success');
}, 2000);

progress-estimator

https://github.com/bvaughn/progress-estimator^[4]

功能：用于在终端中输出异步任务进度条，和常规的进度条不同的是，它会根据每个任务的历史记录来估算这个任务需要的时间。

Demo

第一次：无历史记录

第二次：有 1 次历史记录

第三次：有 2 次历史记录

可以看到每次 estimated 后面的时间都不一样，这对于用户体验来说是比较友好的，能够较为准确地告知用户此次异步操作需要多少时间。比如一次下载模板的网络请求，用户需要了解自己这一次请求还需要多久。

代码

const createLogger = require('progress-estimator');
const chalk = require('chalk');
const path = require('path');

let _logger = null;
const logger = (task, message, estimate) => {
  if (!_logger) {
    _logger = createLogger({
      storagePath: path.join(__dirname, '.progress-estimator'),
    });
  }
  return _logger(task, chalk.blue(message), {
    estimate,
  });
};

const task1 = new Promise(resolve => {
  setTimeout(() => {
    resolve({ success: true });
  }, 1200);
});

const task2 = new Promise(resolve => {
  setTimeout(() => {
    resolve({ success: true });
  }, 4200);
});

async function run() {
  const startTime = Date.now();
  console.log();
  console.log(chalk.blue('Some Tasks'));
  console.log();
  await logger(task1, 'Task 1', 1500);
  await logger(task2, 'Task 2', 600);
  const endTime = Date.now();
  const time = ((endTime - startTime) / 1000).toFixed(2);
  console.log();
  console.log(chalk.green(`✨ Done in ${time}s`));
  console.log();
}

run();

总结

就是这么简单， inquirer / chalk / ora  比较常见， progress-estimator  可能有些人没听过，快用起来吧。

交流讨论

欢迎关注公众号「前端试炼」，公众号平时会分享一些实用或者有意思的东西，发现代码之美。专注深度和最佳实践，希望打造一个高质量的公众号。

❤️ 

公众号后台回复【小炼】

邀请你加入纯净技术交流群（上班划水摸鱼群）

🙏

如果觉得这篇文章还不错

来个【分享、点赞、在看】三连吧

让更多的人也看到

- END -