在前端开发中，我们经常需要在命令行中运行一些脚本任务，例如编译代码、打包文件、运行测试等。这些任务需要一定的时间去完成，而我们通常无法准确知道任务何时会结束。为了提升开发效率，我们需要一个能够显示任务进度的工具。
progress-estimator 是一款 npm 包，它提供了一个简单易用的 API，可以帮助我们在命令行中显示任务进度。本文将介绍如何使用该工具。
安装
使用 npm 安装 progress-estimator：
npm install progress-estimator --save-dev
使用
引入
在需要使用 progress-estimator 的脚本中，使用以下代码引入：
const { progress } = require('progress-estimator')API
progress-estimator 的 API 相对简单。它只提供了一个方法 progress，该方法接受一个任务描述对象作为参数，返回一个 Promise 对象。
任务描述对象包含以下属性：
- task：字符串，任务名称
- total：数字，任务总量
- done：数字，已完成的任务量
- log：函数，用于输出日志信息
下面详细介绍该方法的使用。
显示进度条
我们首先展示如何使用 progress-estimator 显示进度条。假设我们需要遍历一个数组，对每个元素执行一个异步操作，我们可以使用以下代码：
-- -------------------- ---- -------
----- - -------- - - -----------------------------
----- -------- ------------ ------- -
--- ------ ---- -- ------ -
----- ----------
----- -----
------ -------------
---- -----------
--
----- --------------------
-
-该函数接受一个数组作为参数，遍历数组中的每个元素，对每个元素执行一个异步操作。在进入异步操作之前，我们使用 progress-estimator 的 progress 方法显示一个进度条。该方法的参数是一个任务描述对象，它包含了当前任务的名称、总量和一个输出日志的函数。
在异步操作结束后，我们再次使用 progress 方法，传入完成的任务量，以更新进度条。注意，我们需要使用 async/await 语法确保异步操作执行的顺序。
显示剩余时间
除了进度条外，progress-estimator 还能够显示任务的剩余时间。我们可以使用 elapsed 参数来指定已经经过的时间：
-- -------------------- ---- -------
----- - -------- - - -----------------------------
----- -------- ------------- -- -
----- ----------
----- ----- -----------
------ ----
-------- ----- -- - ------
---- -----------
--
--- ---- - - -- - - ---- ---- -
----- ----------------
----- ---------- ----- -- ---- ----------- --
-
-以上代码中，我们使用了 elapsed 参数来指定已经经过的时间，从而让 progress-estimator 能够计算出任务的剩余时间。在更新进度的时候，我们只需要传入已经完成的任务量即可，不需要再传入任务总量。
自定义进度条
我们还可以自定义进度条的样式。progress-estimator 使用 cli-progress 实现进度条，我们可以指定其样式，如下所示：
-- -------------------- ---- -------
----- - -------- - - -----------------------------
----- ----------- - -----------------------
----- ----------- - --- ------------------------- -----------------------------------
----- -------- ------------- -- -
---------------------- --
--- ---- - - -- - - ---- ---- -
----- ----------------
-------------------- - --
-
------------------
-以上代码中，我们首先引入了 cli-progress，然后创建了一个自定义样式的进度条。在操作中，我们使用 progressbar.update(i + 1) 更新进度条，最后使用 progressbar.stop() 停止进度条的显示。
总结
本文介绍了如何使用 progress-estimator 在命令行中显示任务进度。我们可以使用它显示进度条、剩余时间和自定义进度条样式。在实际开发中，我们可以使用该工具提升开发效率，避免等待时间过长而浪费时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae0eb5cbfe1ea0610d58