GitHub - xtermjs/xterm.js: A terminal for the web
Xtrem 是一个用于在 Web 中运行的 terminal 框架，目前是 V5 版本，与之前的版本有比较大的区别和改动
基础使用
import { Terminal } from 'xterm';
import 'xterm/css/xterm.css';
const Xtrem = () => {
const xtremRef = useRef<HTMLDivElement>(null);
const initTerminal = () => {
if (!xtremRef.current) {
return;
}
const term = new Terminal({
convertEol: true,
cursorBlink: true, // 光标闪烁
cursorStyle: 'underline', // 光标样式
theme: {
foreground: 'red', // 文字前景颜色
background: '#000000',
},
});
term.open(xtremRef.current);
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
};
useEffect(() => {
initTerminal();
}, []);
return <div ref={xtremRef}></div>;
};
这里一定要记住引入
xtrem.css否则样式会错乱的
Options
部分配置：
{
/* 光标是否闪烁 */
cursorBlink: boolean;
/* 光标样式 */
cursorStyle: "block" | "underline" | "bar" | undefined;
/* 主题 */
theme: {
/* 前景色 */
foreground: string;
}
}
渲染类型变化
v5之前的版本中，xtrem 内置了两套渲染类型，分别是 DOM 渲染和 Canvas 渲染，通过 renderType 属性来控制渲染器的类型。
在新版本中移除了renderType 属性，且默认自带 DOM渲染器，因为它的兼容性和体积更好 。
相关的 iuess:
在 v5 版本中，Canvas 渲染器被单独迁移出去，与 Webgl 渲染器作为单独的 Addon 来使用:
- xterm-addon-canvas - canvas渲染器
- xterm-addon-webgl - webgl 渲染器
这里推荐使用 webgl渲染器，它的性能是最好的，包括VScode也是使用的Webgl渲染器。
Addon
xtrem 有一些官方的 addon，包括上面提到的两个渲染器，可以在这里看到他们xterm.js/publish.js
xterm-addon-canvas
使用 canvas 上下文进行绘制的基于画布的渲染器。这个插件需要 xterm.js v5+。优先级在 webgl 渲染器后面，如果条件允许使用 webgl 渲染器，尽量使用 webgl 渲染器。且 canvas 渲染器使用的优先级大于默认的 DOM 渲染器。
xterm-addon-webgl
用于启用 WebGL2 的渲染器插件，使用这个插件需要 xtrem的版本为 v4+ , 地址
import { Terminal } from 'xterm';
import { WebglAddon } from 'xterm-addon-webgl';
const terminal = new Terminal();
terminal.open(element);
terminal.loadAddon(new WebglAddon());xterm-addon-web-links
用于在 xterm 支持web 链接的插件，使用之后可以支持在终端中直接打开链接。地址
xterm-addon-fit
用于终端适应父元素的大小, xterm-addon-fit - npm