云IDE：CodeSandbox: 快速进行前端开发的云IDE

Myth丶恋晨 2022-12-01 12:23 200阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center]  
相较于Eclipse Che或者Coder，CodeSandbox目前定位为快速进行Web开发的IDE和原型工具，目标定位与加快Web开发。

--------------------

# 支持的Web项目类型 #

可以在线开发的Web类型的项目包括Angular、Vue、React以及各种类型。可以看到相关的类型还是很多的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 3]

--------------------

# 使用体验 #

选择Angular，可以直接通过模版启动一个如下图包含预览的工程，就可以直接进行编码试验了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 4]  
可以看到此版本的Angular-CLI为1.6.6，使用的方式非常清晰，从上图左侧的菜单栏可以清晰的看出CodeSandbox的思路，上图可以直接修改相关Web应用的工程代码视图，同时还存在配置管理视图，支持对每种模版的配置文件进行管理，可以通过如下所示相应的edit按钮修改模版中工程配置文件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 5]  
可以与GitHub进行代码关联  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 6]  
可以部署到CodeSandbox所支持的Netlify 或者 Vercel上  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 7]  
登录之后可以进行多人沟通协作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 8]

--------------------

# 特性和使用场景 #

*  快速原型开发：和所有WebIDE一样，只需要一个浏览器，可以在任何设备上在任何地方就可以开始原型开发和验证
 *  免安装配置：不需要进行环境安装和配置
 *  使用模版进行开发提速：可以通过模版直接进行开发
 *  实时预览，了解修改的内容
 *  更容易的多人协作，提供可分享的URL，可以和其他同事和朋友随时随处分享代码片段，可以提供可重现的bug报告，在Stack Overflow或者Twitter上提问或者回答的时候使用代码和环境
 *  Learning：提供各种新的框架学习和使用的环境，快速入门和练习
 *  Onboarding：新人新入公司或者项目，学习和熟悉的过程

--------------------

# 总结 #

和其他的IDE相比可以看到这是一个在线的IDE编辑工具，并没有类似VS Code方式的Terminal用于操作关联的虚拟机或者容器的方式，所有操作都是通过直接通过IDE来完成，和本地IDE操作在使用上还是有一定的不同的感受的，而类似Coder之类的IDE都是可以提供此类功能的。所以CodeSandbox是一个更为轻量的Web快速开发的在线IDE开发工具。

--------------------

# 参考文档 #

https://codesandbox.io/  
https://github.com/codesandbox/codesandboxer

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9e2bc39b42b447b6b061aeb7b9389f34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/0a3491026e3e457cb74d82b510d9a1d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/b2748c5664994a1e81ec05f53dfafc7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/d92c474dca894e459292d5a2680efbfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/07a4c95c20054f78813431e7978baee1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/408efd5dd30748b3a7462a23b28a070b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/56b99a27e981465ba6af356ee6f68924.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/99e151b0f0904c0a8a7f01fcc603c35e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/68277226dc9d4408808f193b1d1b4957.png