集成开发环境（IDE）仍然是开发者工具的核心。在线集成开发环境在基于云的工具的浪潮中一路高歌猛进，在过去几年中不断壮大。CodeSandbox是该领域较受欢迎的选择之一，其使用率最近一直在增加。

CodeSandbox因其易用性、简化的技术支持和合理的成本结构--包括免费的公共沙盒，在社会编码领域越来越受欢迎。此外，CodeSandbox是一个开源项目。

继续阅读，了解CodeSandbox及其功能的介绍。你会明白为什么它变得如此受欢迎。

CodeSandbox最有名的是它是一个快速启动和分享前端JavaScript应用程序的环境。这听起来与CodePen和JSFiddle相似，但事实上CodeSandbox是一个更有雄心的项目，它的全栈支持几乎可以与Cloud9这样的成熟的在线IDE相媲美--尽管只是针对JavaScript。

CodeSandbox使分享项目变得非常容易。例如，这里有一个简单的静态HTML样本的链接。如果你点击这个，你的浏览器就会打开IDE沙盒，里面有一个来自InfoWorld的简单HTML问候语，还有InfoWorld的logo--类似于图1。

IDG

请注意，系统已经为该项目生成了一个唯一的名字（"stoic-shaw-c9u57"）。这是项目的持久性名称，用于分享和嵌入。CodeSandbox具有良好的嵌入能力，包括在Medium和简单的iframing的自动支持。

现在让我们通过分叉项目并添加一个样式表来修复InfoWorld标志的尺寸样式。点击右上方的Fork按钮。这将为你的项目创建一个新的独特的URL，并具有相同的代码库。

确保你在文件资源管理器上（左侧菜单栏上的第二个图标）。在文件窗格的标题下，点击添加目录图标。创建一个/css目录，然后在新目录上使用添加文件按钮，添加一个index.css文件。

现在你可以在css/index.css文件中添加一个类似清单1的CSS规则，并将其导入到index.html中，如清单2所示。

你可以在这里看到这些变化的实况。

前面的简单练习应该让你感受到CodeSandbox的能力，同时也向你介绍了你在平台上获得代码的主要方式：通过URL共享。下一个主要方式是通过使用模板创建一个新项目。让我们接下来看看这个。

在右上方，点击Create Sanbox 按钮。这将得到一个类似于图2的对话框。

IDG

你可以看到，该对话框为你提供了可使用的模板。通过选择 "探索模板"，你可以找到更多的社区创建的模板（比如说成千上万的模板）。你还可以通过导入项目选项从GitHub导入模板，稍后你会看到这个选项。

现在，只需使用创建沙盒选项，并在搜索框中输入 "Svelte"。这将提供来自CodeSandbox的官方Svelte模板。选择这个模板。

注意，CodeSandbox IDE的布局是灵活的。大多数窗格可以调整大小，文本编辑器支持分割视图，而且在视图菜单下有各种布局选项。你可以使用这些选项来定制符合你口味的布局。

请注意，Svelte模板给了我们一个成熟的Svelte应用，并将Rollup配置为构建工具。如果你打开package.json文件，你会看到你所期望的一切。

CodeSandbox也会检测你的依赖关系，你可以在文件浏览器下面的依赖关系窗格中管理它们。请注意，该系统足够聪明，可以检测外部依赖，bootstrap.css，以及来自package.json文件的依赖。

当我们打开这个项目时，我想让你看到许多命令都遵循Visual Studio Code的惯例。例如，Ctrl-Shift-p将打开命令调色板，而Ctrl-p将启动文件搜索器。

如果你按下Ctrl-p并开始键入 "App"，App.svelte就会出现，以便快速打开。

现在我们来了解一下沙盒环境。这些决定了CodeSandbox如何托管你的项目。在你的新Svelte应用程序中，如果你在左侧菜单的顶部选择沙盒信息，你会看到它说 "环境：静态"。这意味着沙盒正在作为一个简单的前端应用程序运行，如JSFiddle。CodeSandbox也支持运行基于Node的应用程序。

当运行Node.js应用程序时，CodeSandbox使用一个带有官方Node.js镜像的Docker容器。除了允许访问Node.js运行时间和package.json中的脚本外，Node.js环境还允许访问命令行终端。

要看到这一点，使用官方Node.js模板创建一个新的沙盒，如图3所示。

IDG

注意环境现在显示 "Node"。package.json和index.js文件是你所期望的一个简单的HTTP模块，有一个 "Hello world "响应。

还有一个 "服务器配置"（看起来像一个服务器堆栈的图标），允许你改变端口等东西。

你现在可以使用一个交互式终端。在右下方，你会看到一个名为 "yarn start "的只读输出终端正在运行。在这旁边，你可以点击加号图标，得到一个命令行。在那里，你可以输入ls ，查看目录列表。注意，该应用程序正在/bin/bash/sandbox中运行。

现在点击左侧菜单上的GitHub图标，然后点击Sign In。输入你的GitHub凭证。你现在可以把这个沙盒导出到一个新的 repo，或者从现有的 repo 导入到一个新的沙盒。

这种整合使得CodeSandbox在分享和修改处于版本控制中的小型应用程序时非常方便。

要使用GitHub的私有仓库，你需要一个专业账户，在撰写本文时，该账户每月的费用为9美元。

除了你已经看到的方法--使用模板和从GitHub导入--CodeSandbox还提供了一个命令行工具，可以从你的本地系统导入一个项目。你可以在这里获得这个工具。

你还可以添加一个浏览器扩展，让你直接从GitHub导入。

另一个方便的功能是可以将你的项目导出到Zip文件。这允许你使用CodeSandbox进行快速原型设计，然后当你的应用程序超出它的范围时，再将原型导出到传统的IDE。你可以在文件->导出下找到这个功能。

CodeSandbox已经集成了对客户端应用程序测试的支持。如果你的项目是用支持的技术堆栈构建的，测试应该通过点击按钮来实现开箱即用。

服务器端沙盒不会自动检测测试，但它们可以像正常一样运行（通过NPM脚本）。

你可以访问浏览器预览标签旁边的自动测试标签。

另一个需要注意的重要功能是与部署平台的整合。在左边，点击火箭图标时，将暴露出可用的部署选项。例如，Node.js模板可以被部署到Vercel。

部署集成使得简单场景下的交付管道变得顺畅。

最后但并非最不重要的是，左侧菜单上最下面的按钮将激活实时模式，其中IDE是可共享的，同时可编辑。实时模式为你提供了一个分享沙盒的链接和各种选项，如控制谁可以编辑的能力。

实时协作模式是一种有趣的方法，可以与其他远程部署的开发人员一起研究想法。

尽管CodeSandbox无法与Eclipse、VS Code甚至AWS Cloud9等IDE的功能和多语言支持相提并论，但它拥有许多有趣的功能，可以快速制作原型，分享和协作小型项目和想法。

观察CodeSandbox如何在其现有的受欢迎程度和能力的基础上进行发展和建设将是非常有趣的。