【亲测免费】探索未来终端：xterm.js

2026-01-17 09:39:55作者：翟江哲Frasier

xterm.js 是一款强大的前端组件，由TypeScript编写，旨在为浏览器带来功能完备的本地终端体验。它被Visual Studio Code、Hyper和Theia等知名项目广泛采用，是构建现代Web应用的理想选择。

强大特性一览

无缝兼容：xterm.js 兼容大多数终端应用程序，包括 bash、vim 和 tmux，支持curses基础应用和鼠标事件。
高性能：得益于GPU加速渲染器，xterm.js 的运行速度极快。
丰富Unicode支持：全面支持CJK、表情符号以及IME输入法。
独立完整：零依赖，可直接使用。
无障碍设计：支持屏幕阅读器和最小对比度调整。
更多扩展：链接、主题定制、详尽API，等待您的探索。

开始使用

通过简单的几个步骤即可将xterm.js集成到您的项目中：

首先，通过npm安装模块：

npm install @xterm/xterm

然后，在HTML页面中引入xterm.js和xterm.css，创建一个<div id="terminal"></div>元素，并使用JavaScript实例化Terminal对象并调用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>

导入与扩展（Addons）

xterm.js 支持导入ES6模块语法，并可通过加载各种addon扩展其功能。例如，要安装WebLinksAddon，执行以下命令：

npm i -S @xterm/addon-web-links

然后在代码中：

import { Terminal } from '@xterm/xterm';
import { WebLinksAddon } from '@xterm/addon-web-links';

const terminal = new Terminal();
terminal.loadAddon(new WebLinksAddon());