如何在3分钟内给React项目嵌入Web终端：wterm快速上手教程

如何在3分钟内给React项目嵌入Web终端wterm快速上手教程【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wtermwterm 是一款面向浏览器的 Web 终端模拟器terminal emulator for the web核心用 Zig 编写并编译为约 26 KB 的 WASM配合 React 组件可在几分钟内给任意 React 项目加上一个支持文本选择、复制粘贴、24 位颜色与主题切换的完整终端。本文将带你走通安装、接入和输入控制的完整流程零后端即可先跑起来。wterm 是什么为什么值得用与传统基于 Canvas 的方案不同wterm 直接渲染到 DOM带来几个天然优势️原生交互文字选择、复制粘贴、浏览器查找、读屏器无障碍直接可用高性能Zig WASM 核心脏行追踪dirty-row tracking只重绘变化的行内置主题Default、Solarized Dark、Monokai、Light支持 CSS 变量自定义多框架绑定官方提供 React、Vue 3、Svelte 组件完整 VT 支持VT100/VT220/xterm 转义序列、OSC 8 超链接、宽字符CJK/emoji、备用屏幕vim、htop 等 TUI 程序可正常工作各包职责一目了然完整说明见 README.md包名用途wterm/core无头 WASM 桥接 WebSocket 传输wterm/domDOM 渲染器原生 JS 终端wterm/reactReact 组件 useTerminalhookwterm/just-bash纯浏览器内运行的 Bash 壳第 1 步安装 React 终端依赖约 30 秒在 React 项目根目录执行npm install wterm/dom wterm/react 如果项目是 Next.js记得在next.config.mjs中把两个包加入transpilePackages原因见下文Next.js 项目额外配置。WASM 二进制已内嵌在包里无需任何额外配置即可运行。第 2 步3 行代码渲染终端导入Terminal组件和样式表放入页面即可import { Terminal } from wterm/react; import wterm/react/css; function App() { return Terminal /; }刷新页面一个 80×24 的终端就出现了。此时直接敲键盘输入会原样回显到终端echo 模式。完整最小示例可参考官方文档 react.mdx 与 get-started.mdx。第 3 步接管键盘输入onData 实战真正连接后端或脚本时需要用useTerminalhook 接管输入。官方 React 包 README 给出的标准写法import { Terminal, useTerminal } from wterm/react; import wterm/react/css; function App() { const { ref, write } useTerminal(); return ( Terminal ref{ref} onData{(data) { socket.send(data); // 把键盘输入发给你的 WebSocket 后端 }} / ); }useTerminal返回的四个成员覆盖了几乎所有控制场景详见 README成员作用ref传给Terminal ref{ref}write(data)向终端写入内容字符串或二进制resize(cols, rows)调整终端尺寸focus()聚焦终端常用配置速查Terminal支持的关键 Props完整表格见 react.mdxProp默认值说明cols/rows80 / 24初始行列数theme—solarized-dark、monokai、lightautoResizefalse跟随容器自动调整尺寸wasmUrl—改为独立静态文件加载 WASM利于 CDN 缓存onData回显处理输入不传则自动 echoonTitle/onBell/onResize/onReady—标题、响铃、尺寸、就绪回调切换主题只需一行Terminal thememonokai /。自定义主题通过 CSS 变量--term-fg、--term-bg、--term-color-0--term-color-15实现。Next.js 项目额外配置Next.js 需要在配置中声明两个包否则构建会报 ESM 相关错误// next.config.mjs const nextConfig { transpilePackages: [wterm/dom, wterm/react], };零后端体验搭配 just-bash想让终端真的能执行命令而不用写一行服务端代码wterm/just-bash提供一个完全跑在浏览器里的 Bash 壳。官方 Next.js 示例的接线逻辑非常简洁源码见 page.tsxconst shell new BashShell({ greeting: [Hello from wterm!] }); shell.attach(write); // 输出 → 终端 // Terminal onData{(data) shell.handleInput(data)} / 输入 → 壳支持ls、cat等命令、CtrlR 历史搜索、Tab 补全。想本地跑起官方演示git clone https://gitcode.com/gh_mirrors/wterm1/wterm cd wterm pnpm install zig build pnpm --filter nextjs dev进阶方向完成 3 分钟接入后可以按需求继续扩展连接真实 PTY用wterm/core的 WebSocket 传输对接服务端 PTY实现 SSH 远程终端参考示例 examples/ssh/README.md满血 VT 兼容换用wterm/ghostty内核支持 Kitty 图像协议、组合字符等高级特性ghostty 文档终端里渲染 Markdownwterm/markdown包API 全量参考api-reference.mdx、configuration.mdxwterm 以极小的 WASM 体积换来了接近原生终端的能力无论是做 IDE 内嵌终端、AI 聊天命令行还是教学演示都是一个轻量又完整的选择。【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wterm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考