Xterm使用TypeScript编写的前端终端组件

Xterm.js 是一个用 TypeScript 编写的前端组件,它允许应用程序在浏览器中为用户提供功能齐全的终端。VS Code、Hyper 和 Theia 等热门项目都使用它。

功能

  • 终端应用即插即用:Xterm.js 可与大多数终端应用兼容,例如 bashvimtmux,并支持基于 curses 的应用和鼠标事件。
  • 性能卓越:Xterm.js 非常快速,甚至包含 GPU 加速渲染器。
  • 丰富的 Unicode 支持:支持 CJK、表情符号和 IME。
  • 独立运行:无需任何依赖即可运行。
  • 易于访问:可启用屏幕阅读器和最低对比度支持。
  • 更多功能:链接、主题、插件、完善的 API 文档等。

xterm.js 不是什么

  • Xterm.js 不是可以下载并在计算机上使用的终端应用程序。
  • Xterm.js 不是 bash。 Xterm.js 可以连接到像“bash”这样的进程并让您与它们交互(提供输入,接收输出)。

入门

首先,您需要安装模块,我们通过 npm 独家提供,因此您需要安装该模块,然后通过运行以下命令将 xterm.js 添加为依赖项:

bash 复制代码
npm install @xterm/xterm

要在浏览器上使用 xterm.js,请将 xterm.jsxterm.css 添加到 HTML 页面的头部。然后创建一个 <div id="terminal"></div>,以便 xterm 可以自行附加到该 <div id="terminal"></div> 上。最后,实例化 Terminal 对象,然后使用 div 的 DOM 对象调用 open 函数。

html 复制代码
<!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:

javascript 复制代码
import { Terminal } from '@xterm/xterm';

插件

⚠️ 本节介绍了 v3.14.0 中引入的新插件格式,有关旧格式的说明,请参阅此处

插件是独立的模块,它们基于 xterm.js API 构建,从而扩展了“终端”。要使用插件,首先需要将其安装到项目中:

bash 复制代码
npm i -S @xterm/addon-web-links

然后导入插件,实例化它并调用 Terminal.loadAddon

ts 复制代码
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.js 通常作为开发者工具实现,因此官方仅支持现代浏览器。具体来说,ChromeEdgeFirefoxSafari 的最新版本。

Xterm.js 可在 Electron 应用中无缝运行,甚至可以在早期版本的浏览器上运行。我们致力于确保这些版本能够正常运行。

Node.js 支持

我们还发布了 xterm-headless,它是 xterm.js 的精简版本,可在 Node.js 中运行。一个示例用例是跟踪终端进程运行时的状态,并使用序列化插件,以便在重新连接时恢复所有状态。

API

xterm.js 的完整 API 包含在 TypeScript 声明文件 中,请使用 GitHub 中的分支/标签选择器 (w) 导航到正确的 API 版本。

请注意,某些 API 标记为“实验性”,这些 API 的添加是为了允许开发者尝试新想法,而无需像普通的 semver API 那样承诺支持它。请注意,这些 API 在不同版本之间可能会发生根本性的变化,因此如果您计划使用实验性 API,请务必阅读发行说明。

发行

Xterm.js 大致遵循每月一次的发布周期。

所有当前和过去的版本都可以在此仓库的 发布页面 上找到,您可以查看 wiki 上的高级路线图,并通过浏览 里程碑 了解我们当前的工作内容。

Beta 版本

我们的持续集成 (CI) 会将每次进入主分支的变更发布到 npm 的 Beta 版本。使用以下命令安装最新的 Beta 版本:

bash 复制代码
npm install -S @xterm/xterm@beta

这些版本通常比较稳定,但可能会出现一些 bug。我们建议主要使用 Beta 版本来测试新功能和验证 bug 修复。

贡献

您可以阅读wiki 上的指南,了解如何贡献并设置 xterm.js 进行开发。

关于项目

xterm 是一个使用 TypeScript 编写的前端终端组件,可以直接在浏览器中实现一个命令行终端应用。
MIT
Typescript
19,212
1754
192
2014-03-25
2025-10-02

增长趋势 - stars