无需服务器wtermjust-bash让真实Bash在浏览器终端跑起来的完整指南【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wtermwterm 是一款面向 Web 的终端模拟器A terminal emulator for the web核心由 Zig 编写并编译为约 26 KB 的 WASM 二进制渲染到真实 DOM天然支持文本选中、复制粘贴与无障碍访问。而它的一个特别之处是与 just-bash 搭配后不需要任何后端服务器就能在浏览器里跑起一个可用的 Bash Shell有彩色提示符、有 Tab 补全、有 CtrlR 历史搜索甚至自带一个虚拟文件系统。为什么浏览器里需要 Bash对于以下场景无服务器终端特别实用演示与教学在网页上展示命令交互效果观众点击即可上手无需部署任何后端文档站点wterm 的官方文档首页就内嵌了一个可交互终端访客能直接敲ls、cat试试轻量沙盒给应用内嵌一个看起来像终端的控制台输入被纯前端逻辑接管离线可用shell 完全跑在浏览器内存中不依赖网络默认离线运行它是怎么做到无服务器的整个方案由两层组成组件作用wtermWeb 终端模拟器WASM 核心负责解析 ANSI/转义序列DOM 渲染器负责显示与输入just-bash纯 JavaScript 实现的 Bash 解释器命令在浏览器内存中执行wterm/just-bash适配器把两者接起来提供行编辑、补全、历史等 Shell 体验关键在适配器 BashShell终端就绪后调用attach(write)接管输出之后终端的每次按键通过handleInput(data)交给 just-bash 处理结果直接写回终端——全程没有一个网络请求。最快上手三步接入 React 项目第 1 步安装依赖npm install wterm/dom wterm/react wterm/just-bash just-bash第 2 步挂载终端Terminal组件负责显示onReady回调里创建BashShell并attachonData回调里把按键转发给handleInput。完整可运行示例见 just-bash 文档const shell new BashShell({ files: { /home/user/hello.txt: Hello, world!\n }, greeting: Welcome to wterm!, }); shell.attach(write); // 终端就绪后 // onData: shell.handleInput(data)第 3 步打开页面敲命令ls、cat hello.txt、pwd、cd都能正常工作——它们操作的是一块内存中的虚拟文件系统。✨仓库里的现成示例Svelte 浏览器终端不想从零搭项目仓库提供了一个开箱即用的示例 examples/svelte/它在浏览器中运行 just-bash预置了两个虚拟文件并带主题切换pnpm install pnpm --filter svelte-example dev启动后打开终端按提示试试ls、cat README.md或bash hello.sh。预置的虚拟文件定义在 App.svelte 中greeting会在终端挂载时打印欢迎语。虚拟文件系统给 Shell 预置家目录通过files选项传入「路径 → 文件内容」的映射目录会由路径隐式创建new BashShell({ files: { /home/user/README.md: # My Project\n\nHello, world!\n, /home/user/data/config.json: { key: value }\n, }, });之后ls、cat、cd都针对这块虚拟文件系统工作。提示符也会跟随cd自动更新即使命令以非零状态退出BashShell 选项说明。快捷键和真 Bash 一样顺手Shell 内置了完整的行编辑体验实现见 src/index.ts常用操作一览按键功能Tab补全文件与命令支持编辑命令前半段↑/↓翻历史并还原未完成的输入与光标位置CtrlR增量搜索历史回车执行、Esc 编辑、CtrlG 恢复原输入CtrlW/AltBackspace删除光标前一个单词CtrlU/CtrlK删除光标前 / 后的文本CtrlY恢复被删文本连续删除可一起恢复CtrlC/CtrlL取消输入 / 清屏它还支持 Unicode 感知的编辑emoji 和组合字符会被当作整体移动与删除。进阶让浏览器 Shell 联网默认情况下 shell 完全离线。如需在浏览器内执行curl、fetch等联网命令可传入network配置开启网络访问见 just-bash 文档的 Network Access 一节。 如果你的场景需要真实的系统 Shell而非 just-bash仓库还提供了 examples/local/ 示例Next.js 应用通过 WebSocket 连接node-pty启动本机 PTY支持多会话标签页——那就需要服务器了属于另一条路线。核心文件导航文件说明packages/wterm/just-bash/src/index.tsBashShell 适配器源码apps/docs/content/docs/just-bash.mdx官方文档选项、方法、虚拟文件系统、快捷键全表examples/svelte/无服务器终端完整示例apps/docs/content/docs/vanilla.mdxVanilla JS / 各框架接入方式总结wterm just-bash 的组合证明了一件事浏览器里也能有真终端体验——DOM 渲染保证原生交互WASM 核心保证解析性能just-bash 保证 Shell 语义。三步安装、零后端依赖把一个小终端搬进你的网页只需十几行代码。【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wterm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考