Show HN: 单个 HTML 文件中的 Unix 环境（420 KB）

Source: Hacker News

概览

一个 HTML 文件中的 Unix 环境。

• Shell、文件系统、git、npm、vi，以及 200 多个命令。
• gzipped 大约 420 KB。无需服务器。现在就在浏览器中运行。

shiro.computer

user@shiro:~$ npm init -y
Wrote to /home/user/package.json

user@shiro:~$ npm install left-pad
added 1 package

user@shiro:~$ echo 'const lp = require("left-pad"); console.log(lp("hello HN", 30, "."))' > app.js

user@shiro:~$ node app.js
......................hello HN

user@shiro:~$ git init && git add . && git commit -m "shipped from a browser tab"
Initialized empty Git repository in /home/user
[main (root-commit) a1b2c3d] shipped from a browser tab
 3 files changed, 17 insertions(+)

user@shiro:~$ ▮

一个静态 HTML 文件，启动后进入 Unix shell。文件系统使用 IndexedDB。命令是 JavaScript。文件在页面刷新后仍然保留。所有操作均在客户端运行——页面可以离线使用，无需任何服务器。

构建并交互应用

编写计数器，提供服务，从 shell 中点击按钮，升级为图表工具，使用 git 提交。

Interact → counter → serve → page commands → upgrade → commit

提供一个应用服务，使用 page 点击并读取 DOM 元素，然后提交。

真正的 git，无服务器

init、add、commit、diff —— 全部通过 isomorphic‑git 在客户端运行。

以 GIF 形式快照

将整个文件系统捕获为 GIF。将其拖入另一个实例即可恢复。

Seed GIF → snapshot → drag → restore

source → target（示意）

工作原理

文件系统

使用带有 POSIX‑like API 的 IndexedDB：stat、readdir、readFile、writeFile、mkdir、symlink、chmod、glob。文件在刷新后仍然持久化。

Shell

支持管道、重定向、$variables、&&、||、引号、heredoc——足够的 POSIX 特性以实现真实脚本。

包管理

来自 npm 注册表的真实 tar 包。node 运行 JavaScript 文件。esbuild 打包 TypeScript。require() 解析 node_modules。

单文件

单个自包含的 HTML。所有 JS/CSS 均已在构建时内联。gzipped 大约 420 KB。可部署到任何地方——GitHub Pages、S3，或本地直接打开。