简介
seashells
是一个非常方便的 npm 包,可以将终端命令的输出转化成 HTML 格式并在浏览器中展示。这种技术被称为 “终端录屏”,有时候用来在技术文章中展示终端命令的执行结果。
使用 seashells
包可以让这个过程更加简单、自动化。它通过 WebSocket 将数据传输到 web 页面中,即使在不同的网络中也可以使用(通过 ngrok 应用)。
在本篇文章中,我们将会讲解如何使用 seashells
包来展示终端录屏。
安装
使用以下命令安装 seashells
包:
npm install seashells --global
使用
安装完毕后,在命令行窗口中输入以下命令来开启录屏:
seashells record
此时终端已经记录好了所有的执行输出,并将信息发送至远程的 seashells
服务器。接下来,我们需要打开另外一个终端并输入以下命令来查看刚刚记录下的终端命令输出:
seashells play
此时,在浏览器中打开 http://localhost:8080
就可以看到类似于以下的效果:
使用示例
以下是一个使用 seashells
包展示终端录屏的示例。我们先创建一个 hello-world
目录并进入该目录:
mkdir hello-world && cd hello-world
接着我们初始化 npm 包:
npm init --yes
我们创建一个 index.js
文件,并在文件中添加以下代码:
console.log("hello world");
我们还需要安装 chalk
包:
npm install chalk
此时,我们的命令行区域看起来应该是类似于这样的:
现在我们可以使用 seashells record
命令来记录这一行代码的执行情况:
seashells record
这时候,我们也可以在命令行中执行任何其他的命令,而它们将都被记录下来。接着输入以下命令来查看 seashells
服务器上的录屏:
seashells play
现在在浏览器中打开 http://localhost:8080
,就可以看到我们刚刚记录下的终端执行操作了。
结论
使用 seashells
包可以为技术作者提供一种全新的方式展示终端录屏,通过简单的几步操作就可以完成终端录屏的过程。希望这篇文章对你有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005602781e8991b448de545