无需服务器：wterm+just-bash让真实Bash在浏览器终端跑起来的完整指南

无需服务器：wterm+just-bash让真实Bash在浏览器终端跑起来的完整指南

【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wterm

wterm 是一款面向 Web 的终端模拟器（A terminal emulator for the web），核心由 Zig 编写并编译为约 26 KB 的 WASM 二进制，渲染到真实 DOM，天然支持文本选中、复制粘贴与无障碍访问。而它的一个特别之处，是与 just-bash 搭配后，不需要任何后端服务器，就能在浏览器里跑起一个可用的 Bash Shell：有彩色提示符、有 Tab 补全、有 Ctrl+R 历史搜索，甚至自带一个虚拟文件系统。🚀

为什么浏览器里需要 Bash？

对于以下场景，"无服务器终端"特别实用：

• 演示与教学：在网页上展示命令交互效果，观众点击即可上手，无需部署任何后端
• 文档站点：wterm 的官方文档首页就内嵌了一个可交互终端，访客能直接敲ls、cat试试
• 轻量沙盒：给应用内嵌一个"看起来像终端"的控制台，输入被纯前端逻辑接管
• 离线可用：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并attach，onData回调里把按键转发给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），常用操作一览：

它还支持 Unicode 感知的编辑：emoji 和组合字符会被当作整体移动与删除。

进阶：让浏览器 Shell 联网

默认情况下 shell 完全离线。如需在浏览器内执行curl、fetch等联网命令，可传入network配置开启网络访问（见 just-bash 文档的 Network Access 一节）。

💡 如果你的场景需要真实的系统 Shell（而非 just-bash），仓库还提供了 examples/local/ 示例：Next.js 应用通过 WebSocket 连接node-pty启动本机 PTY，支持多会话标签页——那就需要服务器了，属于另一条路线。

核心文件导航

总结

wterm + just-bash 的组合证明了一件事：浏览器里也能有"真"终端体验——DOM 渲染保证原生交互，WASM 核心保证解析性能，just-bash 保证 Shell 语义。三步安装、零后端依赖，把一个小终端搬进你的网页只需十几行代码。🎉

【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wterm