使用命令行 "破坏者 "为 Node.js 脚本增添活力

Throbber是一个动画元素,表明计算机正在工作. 众所周知的名称,如那个时钟玻璃或死亡的旋转轮子,这个指标被用来传达给用户,他们需要等待一会儿,而计算机完成了它正在做的事情。

不要与进度栏混淆,打击器更像是一个图标,并且在命令行上可以像闪烁的指针一样简单,一系列圆形,或者像由-,\、``和/字符表示的旋转线一样复杂。

在网站上,你可以使用动画 GIF,或者更先进的,用CSS构建一个动画,命令行实现更为复杂,因为它涉及在屏幕的同一部分重复写。

如果你只是在上面提到的动画中的每个字符console.log(),你会得到这样的东西:

1- Loading...
2\ Loading...
3| Loading...
4/ Loading...
5- Loading...
6\ Loading...

在你和我之间,我甚至不知道如何用Node.js在终端屏幕的同一区域中写作和重写,幸运的是,臭名昭着的全职开源(Sindre Sorhus)(https://github.com/sindresorhus)已经为我们整理和包装了东西!

开始的

该包是 ora,自称优雅的终端旋转器. 要开始使用 ora,只需将其添加到您的包:

1# via npm
2$ npm install ora
3
4# via yarn
5$ yarn add ora

随着软件包的安装,你需要从你的脚本中`要求():

1const ora = require('ora');

基本使用

一旦包含在你的脚本中,你可以开始和停止打击器,没有任何问题:

1const ora = require('ora');
2
3const throbber = ora('Rounding up all the alligators').start();
4
5// Simulating some asynchronous work for 10 seconds...
6setTimeout(() => {
7  throbber.stop();
8}, 1000 * 10);

默认情况下,‘ora’显示了一个微妙的旋转器,由点组成,类似于行进蚂蚁指示器(图像应用程序中的选择周围有点线):

1⠏ Rounding up all the alligators

當「setTimeout()」的使用負載啟動時,打擊器會停止並從屏幕上刪除。

<$>[注] ** 注意:** 取而代之的是停机时间,你可以开启一个AJAX呼叫或执行一些需要一段时间的其他工作,当事情完成时停止ora对象。

持续产量

如果你喜欢,你也可以将你的加载文本保留在屏幕上,并用另一个字符代替你的打击符,你甚至可以更改加载文本说完成或类似的东西:

 1const ora = require('ora');
 2
 3const throbber = ora('Rounding up all the alligators').start();
 4
 5// Simulating some asynchronous work for 10 seconds...
 6setTimeout(() => {
 7  throbber.stopAndPersist({
 8    symbol: '🐊',
 9    text: 'All done rounding up the alligators!',
10  });
11}, 1000 * 10);

现在,而不是突然离开屏幕的刺客和文本,你留下了友好的信息和更友好的情绪!

常规破坏者

ora 的默认 throbber 输出对于out of the box 选项来说相当不错,但如果你想要更多,那么 ora 确实会作为一个依赖的项目提供 ‘cli-spinners’。

这个附加项目,由同一作者,有近70(在这个写作时)不同的旋转动画,涵盖几乎每个用例你可以想到。

想到没有被覆盖的东西?

如果是这样,你可以轻松地将自己的动画定义为一些JSON,其中有间隔(框架之间的时间)和你想要循环的框架的数组。

例如,如果你想拥有自己的爬行动物主题,你可以写点类似的:

 1const ora = require('ora');
 2
 3const throbber = ora({
 4  text: 'Rounding up all the reptiles',
 5  spinner: {
 6    frames: ['🐊', '🐢', '🦎', '🐍'],
 7    interval: 300, // Optional
 8  },
 9}).start();
10
11// Simulating some asynchronous work for 10 seconds...
12setTimeout(() => {
13  throbber.stop();
14}, 1000 * 10);

现在你只受你的想象力限制。