playground-elements 全面解析如何用零后端搭建带实时预览的在线代码沙箱【免费下载链接】playground-elementsServerless coding environments for the web.项目地址: https://gitcode.com/gh_mirrors/pl/playground-elementsplayground-elements是 Google 开源的 Web Components 组件库NPM 包让你零后端就能在网页里嵌入一个带实时预览的在线代码沙箱浏览器内的代码编辑器、虚拟文件系统和预览窗口全部在纯前端完成代码永远不会发送到服务器。只要你能托管静态文件就能托管一个代码沙箱。它最适合三类场景 在技术文档中嵌入可编辑的代码示例 构建交互式教程与示例画廊 打造完整功能的在线代码沙箱类似 JSBin / Glitch零后端架构Service Worker 搭建虚拟文件系统playground-elements 的零后端不是口号而是靠浏览器的原生能力实现的Service Worker拦截对特定 URL 空间的请求用你本地的项目文件响应 HTTP 请求等于在浏览器里搭了一个虚拟文件系统。预览组件中的iframe指向这个虚拟空间里的index.html。相关逻辑见 playground-service-worker.ts。Web WorkerTypeScript 编译在独立线程中进行页面始终保持流畅响应。编译实现见 typescript-builder.ts。会话隔离每个playground-project都会生成一个唯一会话 ID用来隔离来自预览 iframe 的请求实现见 playground-project.ts。一键搭建三步拥有实时预览的代码沙箱第 1 步安装依赖npm i playground-elements第 2 步在页面中放置playground-ide组件并用内联script标签写入项目文件playground-ide editable-file-system line-numbers resizable script typesample/html filenameindex.html !doctype htmlbodyHelloscript typemodule src./index.jslt;/script/body /script script typesample/ts filenameindex.ts document.body.appendChild(document.createTextNode(World!)) /script /playground-ide第 3 步本地用开发服务器预览自动处理裸模块导入解析npm i -D web/dev-server npx web-dev-server --node-resolve --watch打开页面左侧编辑、右侧即时刷新就是上图中的效果。官方内置了多个可直接运行的示例如 demo/index.html 和 demo/project-1/project.json。三种方式定义沙箱项目文件方式适用场景说明内联script标签文档内嵌示例用typesample/ts等属性标注文件类型JSON 配置文件项目文件较多时通过project-src属性指向 JSON 清单支持extends继承config属性动态加载项目在 JS 中直接赋值对象也用于保存/分享项目状态JSON 清单示例来自 demo/typescript/project.json{ files: { index.html: {}, my-element.ts: {} } }files中每个文件名可内联content内容或省略后由系统按清单 URL 相对路径自动抓取文件。零构建步骤引入 npm 模块在沙箱里写import {html} from lit这种裸模块导入playground-elements 会自动把它改写成特殊的./node_modules/虚拟 URL并在后台从 CDN默认 unpkg.com按最新版本拉取——完全不需要你在页面里打包任何东西。进阶玩法在项目里放一个package.json声明dependencies即可锁定依赖版本用法和本地 NPM 完全一致支持 Node 风格的export conditionsmodule、import、development、browser配置import map可完全接管模块解析例如把 CDN 换成其他源TypeScript 自动编译无需本地 tsc沙箱会自动编译.ts、.tsx、.jsx文件并自动拉取导入模块的类型声明来显示错误提示。默认编译参数为es2021nodenext模块解析与tsc行为保持一致。注意一个细节跨文件导入 TS 模块时要写.js扩展名和本地tsc一样import ./my-other-module.js;想要类型提示更完整把types/*包写进项目package.json的依赖即可。自定义布局自由组合编辑器与预览窗不满足于默认的左右分栏playground-elements 把 IDE 拆成了可自由组合的小组件组件作用playground-project管理虚拟文件系统协调各类 Workerplayground-file-editor文件编辑器可用filename属性锁定单个文件playground-preview实时预览窗口playground-tab-bar文件切换标签栏playground-code-editor纯文本编辑器基于 CodeMirror 6如上图这种编辑器在上、预览在下的布局只需把编辑器、预览的project属性都指向同一个playground-project id即可不加标签栏用户就只能看到你指定的那个文件——非常适合文档里的单文件示例。更棒的是编辑器基于 CodeMirror 6可以接入任意 CodeMirror 扩展。沙箱安全须知 ⚠️预览中的代码应始终视为不可信代码尤其实现了分享功能时用户可能通过恶意 URL 执行任意代码。默认沙箱基础 URL 是 unpkg.com 上的固定路径因为该源没有权限、无法篡改宿主页面。如果你要覆盖sandboxBaseUrl务必确保新地址与你的站点不同源防止window.parent篡改父窗口不能访问任何敏感 Cookie不能访问任何敏感 API 或资源完整说明见 README.md 的 Sandbox security 章节。主题定制与实用技巧完整主题化通过 CSS 自定义属性可精确控制从背景色到每种语法高亮 token 的颜色包内预置了多套主题如ayu-mirage导入对应样式并加一个 class 即可聚焦用户注意力用playground-hide注释隐藏样板代码、playground-fold注释折叠代码段隐藏的代码不参与展示但正常编译打包注意TypeScript 编译依赖 Web Worker用 Rollup / Webpack 打包时需按 examples/rollup/rollup.config.js、examples/webpack/webpack.config.js 处理 Worker 文件的拷贝保存与分享项目读取playground-project的config属性即可拿到完整项目状态可做 base64 编码存入 URL或对接自己的后端常见问题速查保存分享怎么做序列化config属性JSON base64url 存入 URL hash 最简单。能跑 JSX / SASS 等构建步骤吗支持构建插件还在路线图上暂未提供。模块解析不生效HTML 文件内的 import 暂不会被转换import map 的scopes字段也暂不支持。浏览器兼容如何支持所有现代浏览器Chrome / Firefox / Safari / Edge需要自定义元素、ES 模块、Service Worker 与 Web Worker 能力不支持 IE。总结playground-elements 用 Web Components Service Worker Web Worker 的组合把编辑器 虚拟文件系统 实时预览 TS 编译整套能力压缩进了纯前端无需部署任何后端服务就能获得 Glitch 级别的在线代码沙箱体验。无论你是想在文档里放几个可编辑示例还是从零搭建一个代码演示平台它都能以最小成本落地。想动手试试直接参考 demo/ 目录下的完整示例即可。【免费下载链接】playground-elementsServerless coding environments for the web.项目地址: https://gitcode.com/gh_mirrors/pl/playground-elements创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考