展示HN：一个单HTML文件中的Unix环境 (420 KB)

展示HN：一个单HTML文件中的Unix环境 (420 KB)
Show HN: A Unix environment in a single HTML file (420 KB)

这段代码在网页中设置了三个交互式演示，使用了`DemoPlayer`类。 **交互演示：** 模拟基本文件系统操作——创建目录、写入文件，以及执行第一次Git提交并附带初始信息，然后编辑文件并使用`git diff`查看更改。 **Git演示：** （片段中未提供完整细节，但暗示展示Git功能）。 **种子演示：** 演示“种子”功能，可能用于数据传输或备份。它在“左”Shiro实例上创建一个文件，生成一个GIF，然后“拖动”（传输）该文件到“右”Shiro实例，验证文件在目标位置的存在和内容。该演示包含延迟以可视化该过程。代码在页面加载时初始化这些演示，并启动一个“英雄”动画。每个演示都使用一系列步骤，这些步骤被定义为包含命令(`cmd`)、注释和可选延迟或拖动动作的对象。

## Shiro：一个基于浏览器的Unix环境开发者sagebird创建了Shiro，一个完全功能性的Unix类环境，完全运行在单个HTML文件（约420KB）内。Shiro使用JavaScript构建，并利用IndexedDB进行存储，包含shell、文件系统、Git、npm、Node.js，甚至vi——拥有超过200个命令。 [https://shiro.computer](https://shiro.computer) 上的演示展示了npm安装、Node执行和Git工作流，*实时* 在浏览器内进行。值得注意的是，创建者声称运行Claude Code安装脚本可以在Shiro内工作，允许AI工具使用该环境。然而，评论者指出其局限性：它不是一个真正的Unix系统，因为它不运行ELF二进制文件或拥有内核，而是依赖于TypeScript对常用命令的重新实现。一位用户成功编译并运行了一个简单的C程序，而另一位用户则质疑该项目的目的，称其为“费雪Linux CLI模拟器”。

'].join('\n'); const interactSteps = [ { cmd: 'mkdir -p /tmp/counter' }, { cmd: "cat > /tmp/counter/index.html /tmp/counter/index.html /tmp/repo/README.md' }, { cmd: 'cd /tmp/repo && git add . && git commit -m "initial"', note: 'First commit' }, { cmd: 'echo "v2" >> /tmp/repo/README.md', note: 'Edit a file' }, { cmd: 'cd /tmp/repo && git diff' }, ]; const seedSteps = [ { target: 'right', note: 'Target shiro.computer instance (empty)', delay: 100 }, { target: 'left', cmd: 'mkdir -p /tmp/app' }, { target: 'left', cmd: "echo '

Snapshot me!

' > /tmp/app/index.html" }, { target: 'left', cmd: 'ls /tmp/app', note: 'Files in left Shiro' }, { target: 'left', cmd: 'seed gif', note: 'Generate seed GIF', delay: 2000 }, { drag: { from: 'left', to: 'right' }, delay: 1500 }, { target: 'right', cmd: 'ls /tmp/app', note: 'Files restored!' }, { target: 'right', cmd: 'cat /tmp/app/index.html' }, ]; // ===== Init ===== document.addEventListener('DOMContentLoaded', () => { demos.interact = new DemoPlayer('demo-interact', interactSteps); demos.git = new DemoPlayer('demo-git', gitSteps); demos.seed = new SeedDemoPlayer('demo-seed', seedSteps); // Start hero animation playHero(); });

展示HN：一个单HTML文件中的Unix环境 (420 KB) Show HN: A Unix environment in a single HTML file (420 KB)

展示HN：一个单HTML文件中的Unix环境 (420 KB)
Show HN: A Unix environment in a single HTML file (420 KB)