太酷了！在瀏覽器中就能體驗到功能齊全的終端
導(dǎo)語
Xterm.js 是一個使用 TypeScript 編寫的前端終端組件，它允許應(yīng)用程序在瀏覽器中為用戶提供功能齊全的終端。它被VS Code，Hyper、Theia等熱門項目所使用。關(guān)于終端，開源前哨 之前介紹了好幾個，有號稱下一代終端神器的Warp?，還有狂拽酷炫的終端：eDEX-UI。
項目地址
https://github.com/xtermjs/xterm.js
特征
終端應(yīng)用正常工作： Xterm.js 適用于大多數(shù)終端應(yīng)用程序，如 bash，vim 和 tmux，支持基于 curses 的應(yīng)用程序和鼠標事件。
性能： Xterm.js 非?？欤踔涟ㄒ粋€ GPU 加速渲染器。
豐富的 Unicode 支持： 支持 CJK、emoji 和 IME。
自包含： 不需要任何依賴項即可工作。
可訪問： 可以打開屏幕閱讀器和最小對比度支持
還有更多： 鏈接、主題、插件、文檔齊全的API等
Xterm.js 不是什么
- Xterm.js 不是你可以在計算機上下載和使用的終端應(yīng)用程序
- 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>
運行效果圖如下所示：
導(dǎo)入
推薦通過 ES6 模塊語法加載使用 xterm.js：
import { Terminal } from 'xterm';
插件
本節(jié)介紹v3.14.0 中引入的新插件格式，有關(guān)舊格式的說明請參見[1]
插件是通過構(gòu)建 xrerm.js API 上擴展的獨立模塊。要使用插件，您首先需要在項目中安裝它：
npm i -S xterm-addon-web-links
然后導(dǎo)入插件，實例化它并調(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 附加到運行進程的服務(wù)器
- 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 應(yīng)該可以在大多數(shù)情況下工作，但保留不提供部專門針對它的解決方法的權(quán)利，除非絕對有必要讓基本的輸入/輸出流程正常工作
Xterm.js 可以在 Electron 應(yīng)用程序中無縫運行，甚至可以在早期版本的瀏覽器上運行。這些版本是 xterm.js 力爭保持運作的
Node.js支持
Xterm.js 還發(fā)布了 xterm-headless[6] ，一個在 Node.js 中運行的 xterm.js 精簡版本。一個使用示例，跟蹤進程運行并使用序列化插件時的終端狀態(tài)，以便在重新連接時恢復(fù)所有狀態(tài)
API
Xterm.js 的完整 API 包含在TypeScript 聲明文件中[7]，使用 GitHub（w） 中的分支/標簽選擇器導(dǎo)航到 API 的正確版本。
請注意，一些 API 被標記為實驗性的，添加這些 API 是為了對新想法進行實驗，無需像普通的語義化[8] API 那樣承諾支持它。請注意這些 API 在版本之間可能會發(fā)生根本性的變化，因此如果您計劃使用實驗性 API，請務(wù)必閱讀發(fā)行說明
實際用途
Xterm.js 被廣泛應(yīng)用于多個世界級的應(yīng)用程序中，并為其提供了出色的終端體驗，如：
- 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 版來測試新功能并驗證錯誤修復(fù)
