可用於瀏覽器Web應用的終端組件——Xterm.js

分類：科技
瀏覽數：1729

介紹

Xterm.js是一個用TypeScript編寫的前端組件，它允許應用程序在瀏覽器中為用戶提供功能齊全的終端。它被VS Code，Hyper和Theia等熱門項目所使用。

Github（7k stars）

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

組件特性

  • 終端應用程序正常工作：

Xterm.js適用於大多數終端應用程序，如bash，vim和tmux，這包括對基於curses的應用程序和滑鼠事件支持的支持

  • Performant：

Xterm.js 非常快，它甚至還包括一個GPU加速的渲染器

  • 豐富的 unicode 支持：

支持CJK，表情符號和IME

  • 自包含：

零依賴性

  • 可訪問：

可以使用screenReaderMode選項打開屏幕閱讀器支持

  • 更多特性：

鏈接，主題，插件，記錄良好的API等。

開始使用

首先你需要安裝模塊，只通過npm方式，所以你需要安裝，然後運行以下命令添加xterm.js作為依賴項：

npm install xterm

要在瀏覽器上開始使用xterm.js，請將xterm.js和xterm.css添加到html頁面的頭部。然後創建一個

<div id =「terminal」> </ div>

xterm可以附加到其上。最後實例化Terminal對象，然後使用div的DOM對象調用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>

真實案例

Xterm.js已用於一些世界級的應用程序，以提供良好的終端體驗：

這其中包括了很多我們，特別是作為前端開發者們使用的VSCode也使用了Xtem.js，體驗優秀！

總結

Xterm.js的出現可以讓很多WebIDE煥發活力，能夠將終端集成到WebIDE中來實現更加強大的功能，如果你有這方面的需求，不妨嘗試使用Xterm.js！
「可用於瀏覽器Web應用的終端組件——Xterm.js」相關視頻
科技分類資訊推薦
科技分類視頻推薦
↑