走进多语言游乐场：浏览器、WASM Runtime 与语言包如何协同工作
抱歉，我需要您提供要翻译的具体文本内容（文章正文）。请把需要翻译的 Markdown 文本粘贴在这里，我会在保持原有格式、代码块和链接不变的前提下，将其翻译成简体中文。
概览
在最近的一篇文章中，我探讨了以人类语言为首的编程语言如何通过 WebAssembly 从多语言语法转向多语言运行时。本文更进一步，打开浏览器 Playground 的“引擎盖”，展示实现这一切的机制。
资源
- 项目仓库
- 在线 Playground
- 语言核心
组件
浏览器 UI
一个简单的 HTML/CSS/JavaScript 界面，提供：
- 代码编辑器
- 语言选择器（英语、法语、西班牙语，…）
- “运行”按钮
- 程序输出和中间表示的面板
WASM 运行时
多语言解释器，编译为 WebAssembly，再加上一些帮助代码，使其易于从 JavaScript 调用。解释器负责词法分析、解析、构建抽象语法树（AST）以及评估程序。
语言包
描述每种人类语言如何映射到共享语义核心的数据：关键字、运算符、标点，最终还有错误信息。每个包都是配置，而不是运行时的分支，这使系统易于维护。
概念流程： HTML ↔ JS ↔ WASM ↔ 你的代码 — 语言包只改变“口音”，不改变意义。
执行流程
-
收集源代码和语言选择
UI 从编辑器获取文本并获取所选语言标识符（例如fr或en）。 -
调用 WASM 模块
JavaScript 通过WebAssembly.instantiate绑定将{ source, language_id }传递给导出的 WASM 函数。在 WASM 模块内部，这些数据只是原始字节和一个标识符。 -
使用语言包进行词法分析和解析
词法分析器和解析器会查找所选语言包的关键字映射。诸如si、wenn和if等标记都映射到同一个条件 AST 节点。 -
构建统一的 AST
解析器生成一个单一的、与语言无关的 AST。从此以后，运行时对表层语言不再区分。 -
求值并返回结果
解释器对 AST 进行求值，捕获输出和错误，并通过 JS/WASM 边界返回结构化结果。浏览器在输出面板中渲染这些结果。
所有这些都在浏览器的沙箱环境中完成，学习者只需一个 URL 即可进行实验。
语言包
语言包通常包含：
- 关键字映射 – 例如，将目标语言中的
if、else、while映射到内部标记。 - 逻辑运算符名称 –
and、or、not。 - 字面量约定 – 如十进制分隔符。
- 元数据 – 语言名称和代码。
运行时如何使用语言包
// Pseudocode illustrating the process
function compile(source, language_id) {
const pack = registry[language_id];
const lexer = buildLexer(pack);
const parser = buildParser(pack);
const ast = parser.parse(lexer.tokenize(source));
return ast; // language‑agnostic
}添加新语言只需添加配置行并注册语言包，而无需分叉解释器。这种设计使得在不增加维护负担的情况下，能够对 10 多种人类语言进行真实的实验。
一个很好的副作用是：游乐场可以在不同的表层语法下显示相同的程序，同时保持底层语义完全一致。
错误处理
多语言运行时将关注点分离：
- 核心解释器 – 生成与语言无关的错误代码和结构。
- 浏览器 UI – 以用户友好的方式显示这些错误，并本地化为所选语言。
可能的扩展
- 基于错误代码键入的本地化错误信息目录。
- 能够以与源代码相同的自然语言显示错误。
- 在不重新运行程序的情况下切换诊断信息的语言。
例如，只需更换消息目录，就可以将解析错误以法语或英语呈现，而底层的错误对象保持不变。
部署
演练场由静态资源组成：
- 用于 UI 的 HTML 和 CSS
- JavaScript 粘合代码
- 编译后的 WASM 二进制文件
- 用于语言包的 JSON（或类似）文件
这些可以托管在 GitHub Pages 或任何静态站点托管服务上。解释器编译为 WASM 后，相同的核心可以在其他场景中复用，例如在线教材、文档或通过 WASI 环境的 IDE 扩展。
未来方向
- 更多语言包，包括挑战关键词和布局假设的脚本和书写系统。
- 更丰富的可视化管道（例如，显示 WAT 或内部 AST 与代码并列）。
- 可嵌入的小部件用于教程和交互式学习材料。
贡献
如果您尝试了 playground 并实验新的语言或诊断，我非常期待您在仓库中提供反馈和贡献。
资源
- Project repository
- Online playground
- Language core