wterm原生JS教程：5行代码零依赖渲染浏览器终端

wterm原生JS教程5行代码零依赖渲染浏览器终端【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wtermwterm 是一款运行在浏览器中的终端模拟器terminal emulator for the web用 Zig 编写核心并编译为仅约 26 KB 的 WASM 二进制通过原生 DOM 渲染实现接近原生的性能。本教程面向新手教你用**原生 JavaScript无框架**在网页中嵌入一个真实可用的浏览器终端原生文本选中、复制粘贴、浏览器查找、屏幕阅读器无障碍支持全部开箱即用且无需任何前端框架。为什么选择 wterm 浏览器终端传统方案多在 Canvas 上画字符牺牲了浏览器原生能力。wterm 的思路不同渲染到真实 DOM—— 文字可选中、可复制浏览器CtrlF查找和屏幕阅读器直接生效Zig WASM 内核—— VT100/VT220/xterm 转义序列解析器编译为约 26 KB 的.wasm启动快、体积小脏行追踪Dirty-row tracking—— 每帧只重绘被修改的行配合requestAnimationFrame调度渲染开销极低零依赖—— 纯wterm/dom一个包WASM 已内嵌进 JS bundle无需额外配置核心架构可参考 terminal-core.ts 与 wterm.ts前者定义了TerminalCore接口后者是 DOM 渲染器与输入处理器。最快安装方法一行命令装好 wtermnpm install wterm/dom就这么简单。WASM 二进制默认内嵌在 JS 包中不需要单独复制.wasm文件、不需要构建工具。 如果希望把 WASM 作为独立静态文件部署到 CDN 以便缓存可执行cp node_modules/wterm/core/wasm/wterm.wasm public/wterm.wasm然后传入wasmUrl选项。五步上手wterm 原生JS 最小示例只需三步建一个div、引入样式、五行动态代码。第一步HTML 容器div idterminal/div第二步引入样式与核心代码script typemodule import { WTerm } from wterm/dom; import wterm/dom/css; /script第三步实例化并初始化const term new WTerm(document.getElementById(terminal)); await term.init();到这一步一个 80×24 的浏览器终端已经挂在页面上默认还会自动回显键盘输入——你可以在控制台里直接打字试试。官方文档把这个最小流程整理在 vanilla.mdx完整的选项与方法列表见 api-reference.mdx。处理用户输入onData 回调详解默认行为是把用户敲下的字符回显到终端。当你需要把输入发送给服务器比如后端 PTY时传入onData回调即可const term new WTerm(document.getElementById(terminal), { onData(data) { socket.send(data); // 把用户输入转发到你的 WebSocket 后端 }, }); await term.init();官方 web/index.html 演示页就是一个本地回显的完整示例它把回车转成\r\n、把退格替换为\x08 \x08再term.write(out)回写非常适合逐行阅读学习。其他常用回调回调触发时机onTitle(title)应用通过 OSC 0/2 修改窗口标题时onBell(count)应用响铃BEL时是否发声由你决定onResize(cols, rows)终端网格尺寸变化时常用配置项速查表WTerm构造器接受的常用选项完整列表见 api-reference.mdx选项类型默认值说明cols/rowsnumber80 / 24初始列数 / 行数autoResizebooleantrue用ResizeObserver自动贴合容器尺寸wasmUrlstring—单独部署 WASM 文件时指定地址cursorBlinkboolean跟随应用强制打开/关闭光标闪烁maxImageWidthnumber—Kitty 图像最大渲染宽度CSS 像素onDatafunction—用户键盘输入回调切换主题一行 class 搞定wterm 内置 Default深色、Solarized Dark、Monokai、Light 四套主题全部基于 CSS 自定义属性--term-fg、--term-bg、--term-color-0~--term-color-15切主题就是加一个 classtermElement.classList.add(theme-monokai);想自定义配色直接覆盖 CSS 变量即可样式源码在 terminal.css。进阶用 WebSocketTransport 连接真实后端如果目标是接一个真实的 shell比如 Node 的node-ptywterm 提供了内置的WebSocketTransport支持二进制帧与自动重连import { WTerm, WebSocketTransport } from wterm/dom; const term new WTerm(el, { cols: 80, rows: 24 }); await term.init(); const ws new WebSocketTransport({ url: ws://localhost:8080/pty, onData: (data) term.write(data), }); ws.connect(); term.onData (data) ws.send(data);完整实现可参考 Vue 示例的 pty-server.tsVite 插件形式的 PTY 后端原理与框架无关照搬到任意后端即可。常见问题 FAQQ1必须用框架吗不需要。wterm/dom就是为原生 JS 设计的React/Vue/Svelte 包只是在其之上的封装。Q2终端里的 vim、htop 等全屏应用能跑吗可以。wterm 支持备用屏幕缓冲区alternate screen buffervim、less、htop这类 TUI 应用均正常工作。Q3中文、emoji 等宽字符显示会错位吗不会。核心内置 East Asian Width 表由 unicode_width_table.zig 生成CJK、全角与 emoji 均按双宽单元格对齐。Q4性能如何脏行追踪 帧级渲染调度意味着每帧只重绘变化的行核心 WASM 仅约 26 KB首屏几乎无感。小结wterm 让在网页里放一个真正的终端这件事回到最朴素的形态npm install wterm/dom一个div 一个 CSS importnew WTerm(el)await term.init()零依赖、零构建配置、原生 DOM 渲染五行动态代码即可交付一个支持选区、复制、主题、无障碍的浏览器终端。下一步可阅读官方文档 get-started.mdx 了解 React/Vue/Svelte 版本或在 examples/ 目录中找到各框架的完整示例工程。【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wterm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考