npm 包 bad-line 使用教程

介绍

bad-line 是一个简单易用的 npm 包，它可以帮助我们在 web 应用中实现类似于 Linux 终端的命令行样式。该包支持自定义命令和参数，以及输入历史记录和命令补全等功能。

安装

我们可以使用 npm 包管理器来安装 bad-line：

npm install bad-line

使用

使用 bad-line 包的第一步是创建一个容器元素，这个元素将作为命令行的显示区域。我们可以使用普通的 HTML 元素，比如一个 div：

<div id="terminal"></div>

接着，在 JavaScript 中引入 bad-line 包并实例化：

import BadLine from 'bad-line';

const terminal = new BadLine('#terminal');

这里我们把 #terminal 元素的选择器传递给了 BadLine 构造函数，让它知道要在哪里创建命令行界面。现在打开应用，我们应该能够看到一个空的命令行界面。

添加命令

我们可以通过 addCommand 方法添加自定义命令。该方法接受两个参数：命令名称和一个回调函数，当用户输入该命令时，这个回调函数就会被调用。下面是一个简单的示例，添加了一个名为 echo 的命令：

terminal.addCommand('echo', (args) => {
  terminal.writeln(args.join(' '));
});

这里的回调函数接受一个参数 args，它是一个数组，包含用户输入的所有参数。我们将这些参数用空格连接起来，并通过 writeln 方法输出到命令行界面上。

添加参数

除了命令名称之外，我们还可以为命令添加参数。通过在命令名称后加上空格和参数列表，就可以让用户在命令中输入参数。例如，下面的命令可以让用户输入两个参数：

terminal.addCommand('add', (args) => {
  const [a, b] = args.map(parseFloat);
  if (isNaN(a) || isNaN(b)) {
    return terminal.writeln('Invalid arguments');
  }
  terminal.writeln(`${a} + ${b} = ${a + b}`);
}, '<a> <b>');

这里我们给 add 命令添加了两个参数 <a> 和 <b>。回调函数中使用了解构赋值来获取这两个参数，并计算它们的和。

输入历史记录

在命令行界面上，我们通常会希望能够像 Linux 终端一样回溯之前输入的命令。bad-line 包提供了一个方便的输入历史记录功能，可以通过上下箭头键回溯之前的命令。我们只需在实例化时传递一个 history 数组即可启用这个功能：

const terminal = new BadLine('#terminal', {
  history: ['echo hello', 'add 1 2', 'ls'],
});

这里我们把一个包含三个历史命令的数组传递给 BadLine 构造函数。现在在命令行界面上按上下箭头键就可以回溯之前输入的命令了。

命令补全

除了输入历史记录，命令行界面还支持命令补全功能，可以帮助用户快速输入长命令或文件路径等。我们可以通过实现 complete 方法来为命令添加补全选项。该方法接受一个参数 input，表示用户当前正在输入的文本。它应该返回一个数组，包含所有与输入文本匹配的补全选项。

terminal.addCommand('grep', (args) =>

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/42044) ，转载请注明来源
[https://www.javascriptcn.com/post/42044](https://www.javascriptcn.com/post/42044)