技术深度解析
`mdn/interactive-examples`仓库并非一个单体应用，而是一套精心设计的系统，用于将实时代码编辑器嵌入静态文档。其核心基于CodeMirror（一款流行的基于浏览器的代码编辑器）构建了一个轻量级定制编辑器。其架构可分解为三个层次：
1. 编辑器集成层：该项目提供了一个JavaScript API，MDN的静态站点生成器（Kuma）可调用该API来注入可编辑的代码块。每个示例都是一个自包含的HTML文件，内嵌CSS和JavaScript，存储在仓库的`live-examples`目录中。编辑器本身是CodeMirror的一个轻量封装，配置了语法高亮以及针对HTML、CSS和JS的基本自动补全功能。
2. 沙盒化执行环境：最关键的组件是基于iframe的沙盒。当用户点击“运行”时，编辑器会将代码序列化，创建一个blob URL，并将其加载到一个带有`sandbox`属性的沙盒化iframe中，以限制对父页面及其他来源的访问。这防止了恶意代码影响MDN站点本身。该沙盒还使用`postMessage`在编辑器和预览iframe之间进行通信，实现了无需完全重新加载页面的实时更新。
3. 构建与部署流水线：该仓库包含一个Node.js构建脚本，用于处理示例文件，生成所有可用示例的JSON清单。随后，MDN的构建系统会使用该清单，在每个文档页面上嵌入正确的编辑器配置。构建步骤还会对编辑器的JavaScript和CSS进行压缩，以减少加载时间。
为何被废弃：主要原因是技术债务。该项目依赖于较旧版本的CodeMirror（v5）和一套定制构建流水线，随着MDN迁移到新平台（Yari，一个基于React的静态站点生成器），这套流水线变得越来越难以维护。基于iframe的沙盒方法虽然可行，但存在局限性：它无法轻松支持ES模块等现代Web API，并且通过`postMessage`进行的通信开销引入了延迟。此外，该仓库的结构使得添加新示例或更新现有示例变得困难，需要修改多个文件。
当前替代方案：MDN现在推荐其新的“Playground”功能，该功能基于更现代的堆栈构建。Playground使用服务器端沙盒（可能基于WebContainers或类似技术），支持完整的Node.js运行时，从而允许使用npm包的示例。与旧项目仅限客户端的方案相比，这是一个重大升级。对于希望自托管类似功能的开发者，开源项目`codesandbox-client`（GitHub：约12k星标）提供了一个更强大（尽管也更重）的替代方案。另一个选择是`stackblitz`（GitHub：约9k星标），它开创了WebContainer技术。
| 特性 | MDN交互式示例（已废弃） | MDN Playground（当前） | CodeSandbox（第三方） |
|---|---|---|---|
| 运行时 | 客户端iframe | 服务器端WebContainer | 服务器端Docker/VM |
| NPM支持 | 否 | 是 | 是 |
| 编辑器 | CodeMirror v5 | CodeMirror v6 | Monaco Editor |
| 延迟 | 低（本地执行） | 中（网络往返） | 中-高 |
| 可维护性 | 低（定制构建） | 高（标准化） | 高（托管服务） |
| 开源 | 是（MIT） | 否（专有后端） | 是（MIT） |
数据要点：该表格突显了延迟与能力之间的权衡。已废弃的项目以牺牲运行时特性为代价，优先考虑即时反馈。新的Playground牺牲了一些速度，换取了大幅扩展的功能，这与现代Web开发实践中npm包不可或缺的趋势保持一致。
关键参与者与案例研究
Mozilla（MDN团队）：该项目的主要管理者。Mozilla决定废弃该仓库，反映了其更广泛的组织战略转变，即不再维护定制基础设施。Mozilla一直面临财务压力，导致裁员并重新聚焦于Firefox等核心产品。维护一个定制实时编辑器是他们再也负担不起的奢侈品。相反，他们与StackBlitz合作，将WebContainer技术集成到MDN Playground中。这是一个经典的“购买vs.构建”案例，其中构建选项变得不可持续。
StackBlitz：这家公司为MDN Playground提供了底层技术。StackBlitz的WebContainers利用Service Worker和WebAssembly的组合，直接在浏览器中运行Node.js。这使得无需远程服务器即可拥有完整的开发环境。通过与MDN合作，StackBlitz在开发者社区中获得了巨大的曝光度，将自己定位为嵌入式编码环境的首选解决方案。他们的GitHub仓库（`stackblitz/core`）拥有超过9k星标，并得到积极维护。
CodePen和CodeSandbox：