CodePen 2.0 发布说明

CodePen 2.0 将平台从一个简单的代码游乐场转变为具备实时协作、npm 包管理和直接部署功能的完整开发环境。

集成的项目管理与部署

CodePen 2.0 引入了直接从编辑器部署 Pens 的功能。用户现在可以将 Pen 转换为托管在 codepen.app 上的实时网站，从而快速部署原型、演示和小型网站（例如 codepen.school 项目）。

除了部署之外，项目结构也已现代化。编辑器现在支持 package.json 文件来管理 npm 包，使开发者能够比之前的版本更紧密地管理版本和依赖。JavaScript 现在可以在单个 Pen 中组织成多个文件，减少了为构建复杂演示而从其他 Pens 导入 JavaScript 的必要性。

实时协作与共享

平台引入了实时协作功能，允许多个用户同时在同一个 Pen 上工作。该功能通过邀请系统实现，用户可以邀请共同编辑者加入项目。

为了提升共享体验，CodePen 引入了“Live View”，使观众能够在作者编辑代码时实时看到 Pen 的输出。此功能旨在促进直播和协作开发会话。

通过块实现可扩展性

CodePen 2.0 通过添加“块”来实现可扩展性。例如，Chris Coyier 演示了添加 MJML（Mailjet 标记语言）块，使响应式电子邮件设计过程可以直接在 CodePen 编辑器中进行。平台计划继续向编辑器添加更多专用块，以支持各种开发工作流。

社区反馈与行业背景

虽然此版本受到许多人欢迎，但社区对平台的演进表达了多种观点：

• 用户体验（UX）担忧： 一些长期用户觉得新界面过于复杂，认为 CodePen 最初的吸引力在于其用于快速、简单测试的简洁性。某用户指出，新界面让他们感觉自己在“在网站内部构建网站”。
• AI 变革： 多位用户讨论了生成式 AI 对平台的影响。有用户表示他们不再依赖手动代码参考或示例，而是使用大型语言模型（LLM）生成代码。用户希望更深入的 LLM 集成，例如能够通过提示启动项目，然后在 CodePen 中手动完善。
• 功能请求： 用户建议改进搜索功能，以实现对 Pens 更高级的过滤（例如按特定库如 anime.js 或特定元素如 SVG 过滤），并希望创建一个 API/协议，使本地 IDE（如 VS Code 或 JetBrains）能够与 CodePen Pens 同步。
• 可持续性： 有用户质疑免费托管和部署功能将如何管理以防止滥用，这在免费托管解决方案中很常见。