太酷了！在瀏覽器中就能體驗到功能齊全的終端

作者：王龍 2022-07-29 14:11:51

本文介紹一個前端重點組件，它被VS Code，Hyper、Theia等熱門項目所使用。

導語

Xterm.js 是一個使用 TypeScript 編寫的前端終端組件，它允許應用程序在瀏覽器中為用戶提供功能齊全的終端。它被VS Code，Hyper、Theia等熱門項目所使用。關于終端，開源前哨之前介紹了好幾個，有號稱下一代終端神器的Warp?，還有狂拽酷炫的終端：eDEX-UI。

項目地址

https://github.com/xtermjs/xterm.js

特征

終端應用正常工作： Xterm.js 適用于大多數(shù)終端應用程序，如 bash，vim 和 tmux，支持基于 curses 的應用程序和鼠標事件。

性能： Xterm.js 非常快，它甚至包括一個 GPU 加速渲染器。

豐富的 Unicode 支持：支持 CJK、emoji 和 IME。

自包含：不需要任何依賴項即可工作。

可訪問：可以打開屏幕閱讀器和最小對比度支持

還有更多：鏈接、主題、插件、文檔齊全的API等

Xterm.js 不是什么

Xterm.js 不是你可以在計算機上下載和使用的終端應用程序
Xterm.js 不是bash?。Xtrem.js 可以像bash一樣連接到進程讓您與它們進行交互（提供輸入、接收輸出）。

入門

首先，您需安裝安裝模塊，Xtrem.js 僅通過 npm 發(fā)布，因此您需要安裝該模塊，然后通過運行添加 xterm.js 作為依賴項：

npm install xterm

要開始在瀏覽器上使用 xterm.js，請將 xterm.js? 和 xterm.css? 添加到 HTML 頁面頭部。然后創(chuàng)建一個<div id="terminal"></div>? 讓 xterm 可以自行附加的 div?。最后，實例化該 Terminal? 對象，然后在這個 div? 的 DOM 節(jié)點調(diào)用 open 方法

<!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
      <script src="node_modules/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';

插件

本節(jié)介紹v3.14.0 中引入的新插件格式，有關舊格式的說明請參見[1]

插件是通過構(gòu)建 xrerm.js API 上擴展的獨立模塊。要使用插件，您首先需要在項目中安裝它：

npm i -S xterm-addon-web-links

然后導入插件，實例化它并調(diào)用 Terminal.loadAddon：

import { Terminal } from '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 團隊維護以下插件，但任何人都可以構(gòu)建他們：

xterm-addon-attach[2]：通過 websocket 附加到運行進程的服務器
xterm-addon-fit[3]：使終端適合于包含元素
xterm-addon-search[4]：添加搜索功能
xterm-addon-web-links[5]：添加網(wǎng)頁跳轉(zhuǎn)功能

瀏覽器支持

由于 xterm.js 通常是作為開發(fā)工具，因此官方只支持現(xiàn)代瀏覽器。尤其是最新版本的 Chrome、Edge、Friefox、Safari。

還支持部分 Internet Explorer 11，這意味著 xterm.js 應該可以在大多數(shù)情況下工作，但保留不提供部專門針對它的解決方法的權利，除非絕對有必要讓基本的輸入/輸出流程正常工作

Xterm.js 可以在 Electron 應用程序中無縫運行，甚至可以在早期版本的瀏覽器上運行。這些版本是 xterm.js 力爭保持運作的

Node.js支持

Xterm.js 還發(fā)布了 xterm-headless[6] ，一個在 Node.js 中運行的 xterm.js 精簡版本。一個使用示例，跟蹤進程運行并使用序列化插件時的終端狀態(tài)，以便在重新連接時恢復所有狀態(tài)

API

Xterm.js 的完整 API 包含在TypeScript 聲明文件中[7]，使用 GitHub（w）中的分支/標簽選擇器導航到 API 的正確版本。

請注意，一些 API 被標記為實驗性的，添加這些 API 是為了對新想法進行實驗，無需像普通的語義化[8] API 那樣承諾支持它。請注意這些 API 在版本之間可能會發(fā)生根本性的變化，因此如果您計劃使用實驗性 API，請務必閱讀發(fā)行說明

實際用途

Xterm.js 被廣泛應用于多個世界級的應用程序中，并為其提供了出色的終端體驗，如：

SourceLair[9]
Microsoft Visual Studio Code[10]
ttyd[11]
Katacoda[12]
Eclipse Che[13]
WebSSH2[14]
Codenvy[15]
CoderPad[16]
Terminal for Atom[17]
Spyder Terminal[18]
以及更多，詳見[19]

發(fā)布

Xterm.js 大致遵循發(fā)布周期為每月

所有當前和過去的版本都可以在發(fā)版日志[20]中找到，您可以在 wiki[21] 上查看高優(yōu)先級路線圖，通過 Milestones[22] 了解 xterm.js 現(xiàn)在在做什么

測試版

通過 npm 安裝最新的 beta 版本

npm install -S xterm@beta

這些版本通常是穩(wěn)定的，但可能會出現(xiàn)一些錯誤。我們建議主要使用 beta 版來測試新功能并驗證錯誤修復

責任編輯：張燕妮來源：開源前哨

前端瀏覽器