从事复杂项目,无论您是经验丰富的程序员还是大一新生,您几乎都会遇到问题。 当您将项目拆分为多个模块时,就会出现问题,从而使追踪错误和找到解决方案变得更加困难。 在其他情况下,调试单个实例可能很困难,因为您还没有找到解决您一直在处理的问题的正确解决方案。
它有时也会作为一段代码出现,当时看起来可能很复杂。 JavaScript 是一种非常容易学习的基于 Web 的语言。 只需启动您的桌面浏览器并导航到开发人员工具(通常是 F12),您就完成了! 然后,您可以在无需安装或运行任何复杂软件的情况下尝试 JS。
要开始,您只需要一个浏览器。 开箱即用地拥有所有这些简单性真是太好了,但有时您需要更多。 例如,假设您想试验一个最近发现的新 Web API,但又不想开始一个新项目。
在这篇文章中,我们将比较和对比三个最流行的 JS 游乐场,CodePen、CodeSandbox 和 StackBlitz。 让我们开始吧!
CodePen
前端 Web 开发工具一直在发展,文本编辑器是最新技术的重要组成部分,它使开发人员的生活变得更简单。 除了 Atom 或 Notepad++ 等独立的文本编辑器,近年来基于浏览器的编辑器出现了爆炸式增长,这些编辑器不需要安装程序并促进更大的协作。
CodePen 是一个“用于测试和展示用户创建的 HTML、CSS 和 JavaScript 代码片段的在线社区”,它为学习如何更好地编写前端网页提供了绝佳的机会。
CodePen 为您提供两种“模式”。 第一个也是最常用的是钢笔。 它就像单击一个按钮并直接传送到编辑器一样简单。 从那里,您可以访问预览面板以及基本的 HTML、CSS 和 JS 编辑窗口。
没有“文件系统”、“IntelliSense”或其他任何东西——只有简单的语法高亮和像美化这样的快速命令。 在选项选项卡中,您可以从有限范围的预处理器中选择所有三种语言(例如 TypeScript for JS)或添加到外部源的连接。
如果您只需要免费完成任何事情,那么任何一个编辑器都足够了。 对于不需要大量设置或库的任何东西,我建议使用 CodePen——简单的 HTML、CSS 和 JS,顶部带有可选的预处理器。 如果您想利用 Playground 来改善您的社交媒体形象或开发个人作品集,CodePen 是一个更好的选择。
高级版
您可以在 CodePen 上选择更多选项。 如果您按年付费,您可以获得每月 12 美元、19 美元或 39 美元的三种高级计划之一。 您可以在三层中的任何一层上创建无限数量的私人笔、帖子和收藏。
您还将获得 Pro 徽章(社交提升)、实时协作模式访问权限、无广告等等。 还有某些特定于团队的策略和其他跨层区别。 查看他们的官方计费板以获取更多信息。
主要特性
除了在 CodePen 中创建 HTML、CSS 和 JavaScript 之外,还有一些其他的东西使它与众不同。
- 可以实时查看您的代码。 它不需要编译。
- 实验可以让你学习新事物。
- 创建微小的测试用例来查找和解决问题。
- 展示您的精彩作品。
- 创建和存储笔以供以后使用。
- 尝试其他开发人员的代码并查看它的实际效果。
优势
- 首先,没有成本。
- 内置学习资源。
- 与他人合作并比较项目,以了解他们未来的发展方向。
- 用户界面易于使用且简单明了。
缺点
- 代码库很小,自动代码完成不足。 它只适用于单页项目,无法处理更大的项目。
- 在 CodePen 上,您可以创建私人笔,但您需要升级到 Pro 会员资格(每月 9 美元)。
代码沙盒
CodeSandbox 是一个基于 Web 的代码编辑器。 它为您自动进行蒸腾、打包和依赖管理,让您只需单击一下即可构建一个新项目。 在您创建了一些令人着迷的东西之后,您可以通过简单地分享网站来与他人分享。
该编辑器与任何 JavaScript 项目兼容,尽管它包含某些特定于 React 的功能,例如将项目保存在 create-react-app 模板中的选项。
您在 CodeSandbox 中构建的任何项目都以模板开头。 它可以与特定的库、框架或运行时(包括 Node.js)相关,也可以使用简单的标准 Web 技术。 选择模板后,您将被发送到编辑器,您将在其中找到所有必要的文件,并且预览窗口已经打开。
您可以访问所有沙盒中的“文件系统”,这意味着您可以创建新文件、利用模块(包括 NPM 包)以及与静态资产交互。 还有机会修改模板特定的配置文件。
您甚至可以为您的独特用例构建自己的模板,包括文件结构和依赖项,就像在 IDE 中一样。 由于该工具链接到 Github,您可以快速生成提交并打开 PR。 您可以立即将您的应用程序部署到 ZEIT 或 Netlify。
CodeSandbox 专业团队
CodeSandbox 是一家允许开发人员构建基于浏览器的 Web 应用程序开发沙箱的荷兰企业,它已正式发布了一个协作平台,允许团队在云中处理代码。 新产品 Team Pro 是为完整的产品团队构建的无代码解决方案,从设计师和经理到质量保证 (QA) 团队等等。
项目以用户友好的界面提供给任何希望对 Web 应用程序进行更改或接受更改的人,避免使用其他方法,例如向开发人员发送注释和建议以执行更改、将它们传回讨论并重复该过程。
主要特性
- 基于 Web 的代码编辑器和原型工具。
- 对于本地使用,沙盒可以很容易地以 zip 文件的形式下载。
- 代码编程 在沙盒中完成,可以很容易地与同事共享。
优势
- 改进的用户体验和对编辑器的更好控制。
- 可以在单独的窗口中修改和查看实时预览功能。
- 代码自动格式化并包含 CLI (codesandbox-cli)
- 支持高级 npm 模块。
- 带有建议的漂亮错误消息。
- 它通过提供更好的终端、测试查看器和问题查看器来改善调试体验。
缺点
- 最终消费者会接触到许多个性化设置。
- 从本地计算机拖放文件无法正常运行。
- CodeSandbox 中必须遵循一定的文件夹结构。
- 私人沙盒的功能仅供顾客使用。
闪电战
StackBlitz 是一个基于 Visual Studio Code 的 Web 应用程序在线 IDE。 该平台与桌面版本一样具有响应性和适应性。 StackBlitz 是一个预装的在线 IDE 角度和反应 开发工具。
Thinkster.io 构建了这个奇妙的项目,以尽可能简单地开始您的 Angular 或 React 项目,而不必担心依赖项安装或构建设置。 StackBlitz 提供了许多目前其他在线代码编辑器所没有的惊人而独特的功能。 因此,值得进一步研究 StackBlitz 并发现这个在线 IDE 所提供的功能。
Stackblitz 与完整的 IDE 具有极强的可比性,特别是如果您无法告别 VS 代码,因为该工具是基于它的。 该软件包具有多种功能,可让您开始并继续创建全栈应用程序。
该程序由开发人员熟知的 Visual Studio 提供支持。 离线编辑是该项目的突出特点。 为了实现这一点,Stackblitz 团队创建了一个浏览器内的网络服务器。 在您键入时,它会自动安装依赖项、编译、捆绑并进行热重载。
高级版
Cadet、Astronaut 和 Commander 分别免费提供,每月 8 美元和每月 29 美元。 Astronaut and Commander 包括许多功能,例如无限的私人项目、无限的文件上传、邀请核心团队 Slack 频道等等。 有关详细信息,请参阅官方计费板。
主要特性
- 将 NPM 包添加到您的项目中。
- 得益于新颖的浏览器内开发服务器,您可以在离线时进行编辑。
- 一个托管应用程序 URL,允许我们随时访问(和共享)我们的实时应用程序。
- 其他值得注意的 Visual Studio Code 功能包括 Intellisense、项目搜索 (Cmd/Ctrl+P)、转到定义等。
优势
- Firebase 的部署功能。
- 该编辑器非常易于使用且速度极快。
- 用户可以访问 package.json、index.html 和 index.js。
- 也可以嵌入的可共享源代码。
- 页面大部分区域的实时预览,必要时可以选择在不同页面上打开。
- 离线时,编辑
- 智能完成和改进的 Intellisense。
- Stackblitz 的核心是 开放源码.
缺点
- 您对构建或开发人员服务器没有影响,因为它们是由 create-react-app 命令管理的。
- 在 React 中,应该遵守基本的文件夹结构。
- 无法自动格式化代码,但可以手动进行。
结论
如今,像我们上面看到的那样的编码游乐场可以用来完全构建任何 Web 项目。 当您可以直接从 Web 浏览器构建、调试、测试和部署时,无需在 PC 上安装繁琐的 IDE。
在我看来,StackBlitz 将是其中最好的,因为它是一个基于 Web 的 IDE,它允许 JavaScript、Angular 和其他开箱即用的开发项目,无需安装任何本地开发环境,如 Node.js、npm、或角。 它提供与在本地使用 Visual Studio Code 相同的体验。 实际上,因为 StackBlitz 是由 Visual Studio Code 驱动的,所以感觉它与桌面版本一样快速且通用。
CodePen、CodeSandbox 和 StackBlitz 中的哪一个是您的首选工具? 让我们在评论中知道。
阿巴蒂亚
感谢这篇精彩的文章,一旦我看到 stackblitz.com,我就知道这就是我想要的。