Xterm.js 是一个用 TypeScript 编写的前端组件,它允许应用程序在浏览器中为用户提供功能齐全的终端。VS Code、Hyper 和 Theia 等热门项目都使用它。
bash
、vim
和 tmux
,并支持基于 curses 的应用和鼠标事件。bash
。 Xterm.js 可以连接到像“bash”这样的进程并让您与它们交互(提供输入,接收输出)。首先,您需要安装模块,我们通过 npm 独家提供,因此您需要安装该模块,然后通过运行以下命令将 xterm.js 添加为依赖项:
npm install @xterm/xterm
要在浏览器上使用 xterm.js,请将 xterm.js
和 xterm.css
添加到 HTML 页面的头部。然后创建一个 <div id="terminal"></div>
,以便 xterm 可以自行附加到该 <div id="terminal"></div>
上。最后,实例化 Terminal
对象,然后使用 div
的 DOM 对象调用 open
函数。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
<script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
</body>
</html>
推荐使用 ES6 模块语法加载 xterm.js:
import { Terminal } from '@xterm/xterm';
⚠️ 本节介绍了 v3.14.0 中引入的新插件格式,有关旧格式的说明,请参阅此处
插件是独立的模块,它们基于 xterm.js API 构建,从而扩展了“终端”。要使用插件,首先需要将其安装到项目中:
npm i -S @xterm/addon-web-links
然后导入插件,实例化它并调用 Terminal.loadAddon
:
import { Terminal } from '@xterm/xterm';
import { WebLinksAddon } from '@xterm/addon-web-links';
const terminal = new Terminal();
// Load WebLinksAddon on terminal, this is all that's needed to get web links
// working in the terminal.
terminal.loadAddon(new WebLinksAddon());
xterm.js 团队维护以下插件,但任何人都可以构建它们:
@xterm/addon-attach
: 通过 websocket 连接到正在运行进程的服务器@xterm/addon-clipboard
: 访问浏览器的剪贴板@xterm/addon-fit
: 使终端与包含元素匹配@xterm/addon-image
: 添加图片支持@xterm/addon-search
: 添加搜索功能@xterm/addon-serialize
: 将终端缓冲区序列化为 VT 序列或 HTML@xterm/addon-unicode11
: 将字符宽度更新为相应的 unicode11 值@xterm/addon-web-links
: 添加网页链接检测和交互功能@xterm/addon-webgl
: 使用 canvas
元素的 webgl2 上下文渲染 xterm.js由于 xterm.js 通常作为开发者工具实现,因此官方仅支持现代浏览器。具体来说,Chrome、Edge、Firefox 和 Safari 的最新版本。
Xterm.js 可在 Electron 应用中无缝运行,甚至可以在早期版本的浏览器上运行。我们致力于确保这些版本能够正常运行。
我们还发布了 xterm-headless
,它是 xterm.js 的精简版本,可在 Node.js 中运行。一个示例用例是跟踪终端进程运行时的状态,并使用序列化插件,以便在重新连接时恢复所有状态。
xterm.js 的完整 API 包含在 TypeScript 声明文件 中,请使用 GitHub 中的分支/标签选择器 (w
) 导航到正确的 API 版本。
请注意,某些 API 标记为“实验性”,这些 API 的添加是为了允许开发者尝试新想法,而无需像普通的 semver API 那样承诺支持它。请注意,这些 API 在不同版本之间可能会发生根本性的变化,因此如果您计划使用实验性 API,请务必阅读发行说明。
Xterm.js 大致遵循每月一次的发布周期。
所有当前和过去的版本都可以在此仓库的 发布页面 上找到,您可以查看 wiki 上的高级路线图,并通过浏览 里程碑 了解我们当前的工作内容。
我们的持续集成 (CI) 会将每次进入主分支的变更发布到 npm 的 Beta 版本。使用以下命令安装最新的 Beta 版本:
npm install -S @xterm/xterm@beta
这些版本通常比较稳定,但可能会出现一些 bug。我们建议主要使用 Beta 版本来测试新功能和验证 bug 修复。
您可以阅读wiki 上的指南,了解如何贡献并设置 xterm.js 进行开发。