让你大吃一惊的在线 Javascript 游乐场

在线代码游乐场是测试代码片段的好方法，无需在本地设置项目并启动 IDE。您可以快速验证您的想法并与他人分享。大多数在线代码游乐场都提供了快速简便的解决方案。然而，在处理大型应用程序时，它们大多显得力不从心。

基础知识

在线代码游乐场提供了各种基本功能，可以说是必备的功能：

• 语法高亮
• 预览窗口
• 文件预处理（如 Typescript、SASS）
• 包含外部文件和 JavaScript 库
• 通过短网址分享
• 在其他页面中嵌入演示
• 基本功能零成本

有很多编辑器可以满足上述标准：JSFiddle、CodePen、JSBin、Liveweave、PlayCode、Plunker、JSitor。

问题

上面的 Playground 完全没问题，但我想分享一些由框架 CLI（例如Angular CLI、Vue CLI和CreateReactApp）生成的完整项目。虽然有些 Playground 允许你使用前端框架，但这些框架通常是全局访问的。你不会以这种方式编写你的下一个生产应用程序。

我想要的功能：

• 使用与生产项目相同的堆栈
• 从 Github 导入
• 使用任何 NPM 包

解决方案

令我惊讶且具有上述功能的项目是Codesandbox。

Codesandbox 允许你导入你的 Github 项目，或者使用其 CLI 生成新的 React、Angular 或 Vue 应用。它运行流畅，启动速度很快。我成功地在几秒钟内就迁移了用 React Hooks 实现的 TodoApp。

它还具有一些不错的附加功能：

• 部署到 Netlify 或 Zeit
• VSCode 集成（如快捷方式）
• 实时协作
• 自动完成
• linting
• devtool 功能
• Github 提交
• 后端应用程序的容器沙箱（Node.js）
• 它是开源的，你可以贡献

概括

Codesandbox 的简洁、快速和功能集让我惊叹不已。它感觉就像我们最需要的在线游乐场。我尝试过其他游乐场，但自从有了 Codesandbox，我就再也不想犹豫了。

希望您有同样的感受并尝试这个很棒的网站。