脚手架的开发（三）

如何实现命令行 UI 显示？

命令行渲染标准

• ANSI escape code

脚手架常用 UI 库

• chalk: 颜色渲染
  • 基本用法
  • chalk-cli 各种使用技巧
  • 源码阅读
• ora: loading 状态
  • 基本用法
  • cli-spinners
  • 源码阅读

chalk 的使用

安装 chalk 依赖

npm install -S chalk

新建 ui/src/chalk.mjs 文件，注意因为这里用 ES 模块引入，所以要使用 .mjs 创建文件

import chalk, { Chalk } from 'chalk'

console.log(chalk.red('hello cli-ui 测试效果'))
console.log(chalk.red.bgGreen.bold('HELLO CHENY'))

const error = (...text) => console.log(chalk.bold.hex('#ff0000')(text))

const warning = (...text) => console.log(chalk.bold.hex('#ffa500')(text))

error('Error!')
warning('Warning!')

// 颜色为0 的时候 不显示颜色
const cusotmChalk = new Chalk({ level: 0 })

console.log(cusotmChalk.blue('颜色显示不'))

效果如下：

chalk-cli 脚手架的使用

安装 chalk-cli 依赖

npm install -g chalk-cli

安装后直接在命令行输入以下命令

chalk -t '{red.bold hello cheny}'   // 该句柄就为红色
或
chalk red bold hello cheny

更多命令可以参考 chalk-cli --help 或 npm 包介绍

ora 的使用

安装 ora 依赖

npm install ora -S

使其命令行具备 loading 效果

import ora from 'ora'

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

let percent = 0

spinner.color = 'blue'
spinner.text = 'Loading...'
spinner.prefixText = 'Downloading chalk'

let task = setInterval(() => {
  percent += 10
  spinner.text = 'Loading...' + percent + '%'
  if (percent === 100) {
    spinner.stop()
    spinner.succeed('Download finish!')
    clearInterval(task)
  }
}, 300)

执行 node src/ora.mjs

inquirer 用法

安装

npm install -S inquirer

基本使用：

import inquirer from 'inquirer'

inquirer
  .prompt([
    /* Pass your questions in here */
    {
      type: 'input',
      name: 'yourName',
      message: 'your name',
      default: 'CHENY',
      validate: v => v === 'CHENY',
    },
    {
      type: 'number',
      name: 'num',
      message: 'your number',
    },
  ])
  .then(answers => {
    // Use user feedback for... whatever!!
    console.log(answers)
  })
  .catch(error => {
    if (error.isTtyError) {
      // Prompt couldn't be rendered in the current environment
    } else {
      // Something else went wrong
    }
  })

其他用法：

import inquirer from 'inquirer'

inquirer
  .prompt([
    /* Pass your questions in here */
    {
      type: 'checkbox',
      name: 'choice',
      message: 'your choice',
      default: 0,
      choices: [
        { value: 1, value: 'red' },
        { value: 2, value: 'green' },
        { value: 3, value: 'blue' },
      ],
    },
  ])
  .then(answers => {
    // Use user feedback for... whatever!!
    console.log(answers)
  })