在线代码游乐场汇总

如今，在线上有各种代码游乐场。 有些代码（例如JSFiddle或JSBin ）在设计时考虑了共享，这对于构建简化的测试用例以演示您遇到的错误或问题很有用。 有些工具（例如ES6 Fiddle或D3.js Playground ）使您可以尝试使用特定的库或技术，而不必大惊小怪地创建文件或设置构建步骤。 其他（如CodePen ）具有其他社交方面的功能，使您可以炫耀最新的创作并获得同行的反馈。

不用说，它们都很棒，并且使开发人员的生活变得更加轻松！

在SitePoint，我们使用CodePen来托管我们的大多数前端演示，直到最近，我还以为我很清楚。 直到我读了Chris Coyier的文章， 《使用CodePen和JavaScript可以做的10酷事情》 ，教给我一些真正的技巧。 例如，您是否知道可以使用特殊URL从其他Pens获得Ajax的东西？ 还是可以让CodePen使用JS Hint检查JavaScript？ 没有？ 好吧，你可以。 而且，作为额外的好处，CodePen还将为Google提供方便的链接，以查找有关特定错误的更多信息。 我敦促您阅读这篇文章，以了解Chris还可以提供哪些其他绝妙的技巧。

这就是前端。 但是，如果您要共享一个包含后端组件的代码演示该怎么办？ 那将是棘手的，对吗？ 好消息是，事实可能并非如此。 随着服务器端JavaScript的迅猛发展，许多站点都已成长为适合托管涉及后端代码的演示的站点。

想到的第一个是Plunker 。 Plunker被证明很受欢迎的原因之一是因为它允许用户创建任意数量的文件并通过允许使用诸如public/js/app.js文件名来模仿开发环境。 Plunker与SystemJS模块加载器，它可以在飞行（引擎盖下使用巴贝尔），并同时面对AMD，CommonJS的和ES6模块（如transpile ES2015很好地扮演这个演示从最近SitePoint文章演示）。 Plunker还允许您将npm的软件包添加到您的项目中（使用npmsearch.com ），并将Gitter集成在编辑器中。

下一个值得一提的站点是ESNextbin 。 通过直接访问package.json文件，ESNextbin使生活变得更轻松。 您在代码中指定的所有依赖项都可能需要在代码中进行相应的使用。 它通过使用Browserify-CDN做到这一点，后者从npm注册表中提取模块并将其浏览器独立化。 ESNextbin也将允许您在ES2015中编写代码，并使用Gi​​tHub Gists保存文件，以便与他人共享演示。

我要提到的最后一个站点是HyperDev 。 它是由Fog Creek的人们创建的，直到最近才发布 ，但看起来已经产生了很大的影响。 HyperDev如此出色的原因在于它降低了进入门槛。 只需访问站点，您就可以使用自己的自定义URL创建自己的私有虚拟机（配有运行Node.js的服务器）。 无需登录，无需进行零配置。 非常便利！

HyperDev附带了许多很酷的功能。 例如，当您在HyperDev的IDE中键入更改时，这些更改将自动部署到新的Web服务器上。 如果您更改任何服务器端文件，也是如此。 您还可以邀请协作者参加项目，这将使他们可以与您一起在同一文档中进行实时编辑。

HyperDev周围已经涌现了很多社区，他们拥有许多很棒的演示库，它们有望随着时间的流逝而不断发展。

现在就结束了。 我错过了您最喜欢的演示网站吗？ 让我知道。 也许您对我提到的其中一个网站有一些提示和技巧？ 让我知道。 您有想要炫耀的炫酷演示吗？ 让我们也有。

我期待在下面的评论中收到您的来信！

最初发布在SitePoint JavaScript新闻中 。

From: https://www.sitepoint.com/round-up-online-code-playgrounds/