前言

最近在学习脚手架开发，了解到ora这个专门用于node.js环境下，终端loading的工具，node常见的命令行工具基本上都是用ora作为loading效果。今天我们就一起来看看它的使用方式，并且尝试自己手动实现一个

代码

import cliSpinner from 'cli-spinners'
import cliCursor from 'cli-cursor'
import { BufferListStream } from 'bl'
import readline from 'readline'

const spinners = cliSpinner.dots // loading样式
const text = 'loading' // loading文本
const stream = process.stdout
let frameIndex = 0
const frames = spinners.frames // 每一帧loading的渲染内容（字符）
const interval = spinners.interval

// 创建输入输出缓冲流，这样loading的时候，输入的东西全都会被隐藏并缓存，结束后再显示出来
const mutedStream = new BufferListStream() // mute的意思就是先隐藏输入
mutedStream.pipe(process.stdout)
const rl = readline.createInterface({
  input: process.stdin,
  output: mutedStream
})

// 清空终端的方法
// 先将光标移动到左上角
// 然后清空行数，同时关闭输入输入缓冲流
function clear() {
  stream.cursorTo(0) // 绝对位置，直接到左上角
  stream.clearLine(1)
  rl.close()
}

// 停止渲染的方法，基本就是重置各种状态
function stop() {
  clearInterval(i)
  clear()
  frameIndex = 0
  stream.write('\n')
  cliCursor.show(stream)
}

// 每次渲染的时候先隐藏光标，然后清空屏幕
// 之后找出当前渲染帧的文本，并进行输入
// 最后再更新下一次的渲染帧
function render() {
  cliCursor.hide(stream)
  clear()
  const renderText = frames[frameIndex] + ' ' + text
  stream.write(renderText)
  frameIndex = (frameIndex + 1) % frames.length // 防止越界
}

const i = setInterval(render, interval)

setTimeout(() => {
  stop()
}, 3000)

实现Node.js命令行工具ora的loading效果

前言

代码