从零开始创建 cli-progress 自定义预设:打造独一无二进度条样式
在开发命令行应用时,一个直观美观的进度条能极大提升用户体验。cli-progress 作为一款轻量级的命令行进度条工具,不仅提供了丰富的预设样式,更支持开发者创建完全自定义的进度条风格。本文将带你一步步打造专属于你的进度条预设,让你的命令行应用脱颖而出。
认识 cli-progress 预设系统
cli-progress 的预设系统位于项目的 presets/目录下,通过模块化的方式组织不同风格的进度条配置。系统默认提供了四种预设:legacy、shades_classic、shades_grey 和 rect,这些预设定义了进度条的外观、字符和格式。
不同预设样式的进度条展示,从左到右分别为 legacy、shades_classic、shades_grey 和 rect
预设本质上是一个包含特定配置属性的 JavaScript 对象。以 presets/rect.js 为例,一个基础的预设结构如下:
module.exports = {
format: ' {bar}■ {percentage}% | ETA: {eta}s | {value}/{total}',
barCompleteChar: '■',
barIncompleteChar: ' '
};
自定义预设的核心配置项
创建自定义预设前,需要了解 cli-progress 提供的核心配置选项。这些选项决定了进度条的外观和行为:
进度条格式 (format)
格式字符串定义了进度条的整体布局,可包含以下占位符:
{bar}: 进度条主体{percentage}: 完成百分比{value}: 当前值{total}: 总值{eta}: 预计剩余时间
进度条字符
barCompleteChar: 已完成部分的字符barIncompleteChar: 未完成部分的字符barGlue: 连接完成与未完成部分的字符(可选)
样式增强
colors: 为进度条添加颜色(需配合 chalk 等颜色库)width: 进度条宽度(默认为 40)stopOnComplete: 完成后是否停止动画
五步创建自定义预设
1. 创建预设文件
在 presets/目录下创建新的预设文件,建议使用有意义的名称,如 custom-dots.js。
2. 定义基础结构
在文件中导出一个包含配置选项的对象:
module.exports = {
// 配置选项将在这里定义
};
3. 设计进度条格式
设计适合你应用场景的格式字符串。例如,创建一个简洁的点式进度条:

