介绍
multibar 是一个基于 Node.js 的 Terminal 多进度条管理工具,适用于前端项目中需要同时管理多个任务的情况,例如编译、打包、部署等。multibar 以简洁、易用、可扩展为特点,可以方便地自定义多个进度条,并在命令行中进行动态展示。
安装
使用 npm 可以方便地安装 multibar。
npm install multibar --save-dev
使用
在项目中引入 multibar 模块,创建一个 Multibar 对象。
const Multibar = require('multibar'); const multibar = new Multibar({ format: ' {title.gray} {bar} {percentage}%', barCompleteChar: '\u2588', barIncompleteChar: '\u2591', hideCursor: true });
其中,format
属性定义了进度条的样式,它是一个类似 Mustache 的字符串模板,用于对进度条进行格式化、样式定制等。格式化语句使用花括号包裹,比如 {title.gray}
表示进度条的标题(灰色),{bar}
表示实际的进度条,{percentage}
表示当前进度占总进度的百分比等等。
barCompleteChar
和 barIncompleteChar
属性用于自定义进度条中已完成和未完成部分的样式。hideCursor
属性则表示是否隐藏光标,避免在多进度条切换时出现闪烁问题。
接着,我们可以使用 multibar.newBar()
方法创建一个新的进度条,并设置进度条的标题、总进度值以及其他样式参数。
-- -------------------- ---- ------- ----- ---- - --------------------- - ------ ---------- - ------ --- --------- ---- ----------- - - --- ----- ---- - --------------------- - ------ ------------------- - ------ ---- --------- --------- ----------- --- --- ----- ---- - --------------------- - ------ ----------- - ------ --- --------- ---- ----------- --- ---
其中,newBar()
方法接受两个参数,第一个参数是进度条的标题(格式化模板),第二个参数则是进度条的相关配置,包括总进度 total
,已完成部分的字符 complete
,未完成部分的字符 incomplete
等,具体格式参数和常用配置请参考 multibar API 文档。
最后,我们可以使用 bar1.tick()
方法和 bar1.update(progress)
方法来更新进度条的进度,如下所示。
-- -------------------- ---- ------- --- ---- - - -- - - --- ---- - ------------ -- -- - - -- --- - --------------- - -- -- - - -- --- - ------------ - ----- ------------ - ---------------- -- -------
其中,tick()
方法表示进度增加1,update(progress)
方法则表示更新进度为指定值 progress
。需要注意的是,在进度条更新过程中需要等待一定时间(如等待编译完成),我们可以使用 await sleep(1000)
等待 1 秒后再更新进度条。
最后,使用 multibar.stop()
方法可以停止所有进度条的更新和动画。
示例
下面是一个实际应用的例子:使用 multibar 统一管理 webpack 的编译进度和 nodemon 的日志输出。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- -------- - -------------------- ----- ------------- - ------------------------------------ ----- -------- - --- ---------- ------- - ------------ ----- --------------- ---------------- --------- ------------------ --------- ----------- ---- --- ----- ---------- - ------------------------ ------ ---------- - ------ ----- --------- --------- ----------- -------- --- ----- ---------- - ------------------------ ------------ ------ -------- - ------ ----- --------- --------- ----------- -------- --- ----- --------------- - ----------------------- --------------------------------------------- -- -- --------------------------- -- ---------------------------------------------- --------- -------- -------- -- --------------------------------- -- ------------------------------------------ ----- -- - ----- --------- - ------------------ -- ----------- - ------------------------------------------- - ---- - --------------------------------------- - --- ----- -------------- - --------- ------- ------------------ ------- ---------------- --- -------------------------- -- -- - ---------------- - -------- --------- --- ---------------------------- -- -- - ---------------- - -------- ----------- --- -------------------------- ----- -- - --------------------- ----------------- ----- ------------- --- --- --------------------------- --- -- - ----- -------- - --- -- ---------------------------- - -- -- ---------- - ----------------- ----- --------------------- --- - --- -------- --------- - ------ --- --------------- -- ------------------- ----- - ------ ---------- - ----- ---------------------- ------------------------- ----- -------------------- -- -- - ---------------- ---------------------------- --------------- ---
总结
multibar 是一个简单、易用的 Terminal 多进度条管理工具,适用于多任务场景下的进度管理。本文简要介绍了 multibar 的主要功能和使用方法,并给出了一个实际应用的示例。通过学习本文,你可以轻松地使用 multibar 对项目中的多个任务进行进度管理,提高工作效率和代码质量。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600562e881e8991b448e0922