企业官网建设流程全解析

无需服务器：Codapi浏览器内沙盒全解（WASM跑Python、PGlite跑PostgreSQL、JS与Fetch）

【免费下载链接】codapi-jsInteractive code examples for documentation, education and fun.项目地址: https://gitcode.com/gh_mirrors/co/codapi-js

Codapi 是一个开源的交互式代码示例库，它能把文档里的静态代码片段变成可点击"运行"的可执行沙盒。而它最惊艳的一点是：不需要任何服务器——JavaScript 和 Fetch 直接在浏览器里执行，Python 通过WASM（WebAssembly）在浏览器内运行，甚至 PostgreSQL 也能借助PGlite在你的浏览器标签页里跑起来。本文将带你快速看懂这套"浏览器内沙盒"的完整玩法。✨

为什么需要"无需服务器"的沙盒？

传统的代码 Playground 需要把代码发到一个 Codapi 服务器去执行。但 Codapi 的浏览器内沙盒方案把执行环境完全搬进了用户的浏览器：

• ✅ 零部署：不用申请服务器、不用配置云函数
• ✅ 零成本：不产生任何后端流量费用
• ✅ 隐私友好：代码只存在于读者本地，不出浏览器
• ✅ 即开即用：页面加载后就能跑，没有网络往返延迟

适合教程网站、博客、在线课程等"想让读者亲手试一下"的场景。

JavaScript 沙盒：最轻量的浏览器代码执行

javascript沙盒是浏览器内执行中最简单的一个。它直接调用浏览器的AsyncFunction构造函数，把代码当作一个异步函数来执行，并自动接管console.log的输出显示到结果区。

使用方式很简单：在代码块后加一个沙盒标签，把engine设为browser、sandbox设为javascript，读者就能在你的页面上实时修改并运行 JS 代码了。

• 源码入口：src/engine/browser.js（按沙盒类型分发执行器）
• 执行实现：src/engine/javascript.js（AsyncFunction执行 + console 输出捕获）
• 官方文档：docs/browser-only.md

Fetch 沙盒：在页面上直接调试 HTTP 请求

fetch沙盒让读者直接在浏览器中发送真实的 HTTP 请求——代码以"请求规格"的形式书写（方法、URL、Header、Body），执行后返回完整的响应头与响应体，并附带耗时统计。

这对 API 文档特别有用：读者可以复制你的请求示例，改改参数，亲眼看到真实的接口响应，而不必打开 Postman。

• 请求解析与执行：src/engine/http.js（解析请求规格并调用 Fetch API）

用 WASM 在浏览器里跑 Python：WASI 沙盒全解析 🐍

这是 Codapi 浏览器内沙盒的"王牌"。原理是通过Wasmer WebAssembly 运行时，在浏览器里加载各语言官方发行版的WASI 编译产物，真正执行 Python 代码——不是模拟器，而是原原本本的 CPython。

内置支持的 WASI 沙盒一览（定义于 src/engine/wasi/boxes.js）：

各沙盒的启动命令与入口文件（如 Python 的/src/main.py）统一注册在 src/engine/wasi/commands.js，执行引擎则在 src/engine/wasmer.js 中完成"WASM 下载 → 编译 → 挂载文件系统 → 运行"的完整流程，代码文件会被挂载到/src目录供解释器读取。

这意味着：你的读者无需安装任何环境，打开页面就能运行print("Hello")并看到结果。🎉

PGlite：把 PostgreSQL 装进浏览器标签页 🐘

想演示 SQL 却不想为每个读者准备一个数据库实例？Codapi 内置了pglite引擎，基于PGlite（PostgreSQL 的纯 WASM 实现），首次执行时自动在浏览器内创建一个真实可用的 PostgreSQL 数据库，之后即可直接在页面上运行 SQL 查询：

• 初始化即建库：src/engine/pglite.js 中new PGlite()一行完成数据库创建
• 执行时自动计时，并返回查询结果集与错误信息

对于"教你写 SQL"这类教程，这几乎是零成本的实验环境——每个读者都有自己独立的数据库，互不干扰。

沙盒引擎架构：一张图看懂执行分发

所有引擎统一注册在引擎注册表中（见 src/codobj.js），浏览器按engine属性选择执行路径：

输出模式：让沙盒结果更直观 📊

代码运行的结果不止能显示纯文本。Codapi 支持多种输出模式：图片、HTML 片段、交互式 DOM 等——比如在浏览器沙盒里直接渲染一张 Chart.js 交互式图表，读者可以缩放、悬停查看数据点：

配合代码单元（Code Cells），还能实现类 Jupyter Notebook 的连续执行体验。

快速上手：三步接入浏览器沙盒

1. 安装：npm install @antonz/codapi（包名@antonz/codapi，Apache-2.0 许可，可自由商用）
2. 放代码块：在页面中放一段静态代码（pre > code）
3. 挂沙盒标签：代码块后添加codapi-snippet元素，指定engine="browser"与目标sandbox

完整集成指南见 docs/html.md，Docusaurus、Docsify、Notion、WordPress 等平台均有专门的接入文档（见 docs/ 目录）。

小结：Codapi 浏览器内沙盒用 WASM 把 Python、SQL、PHP 等完整运行环境"压缩"进了浏览器的标签页——零服务器、零部署、零成本，却让每个读者都能亲手运行代码。做文档、做教程、做在线课程，现在就让它跑起来！🚀

【免费下载链接】codapi-jsInteractive code examples for documentation, education and fun.项目地址: https://gitcode.com/gh_mirrors/co/codapi-js