今天，给大家分享一个神器—— JavaScript线上沙箱环境 codesandbox.io

三个核心优势

官方文档写了codesandbox 的三大优势
image.png
Code Anywhere
An instantly ready, full-featured online IDE for web development on any device with a browser.
一、任何地方都能写代码：一个完备的线上web开发 IDE
image.png
界面左侧和中间是类似于大多数IDE的布局，右侧还有即时编译部署后的效果界面。
支持大多数常见的IDE功能，比如代码格式调整，变量跳转，基本的代码提示等。

Start Quickly
With no setup, and templates for all popular frameworks to get you started quickly.
二、快速开始：codesandbox拥有所有流行框架的模板，方便你快速创建项目
image.png
如上图所示，无论你是想写 React 还是 Vue 、Angular，都有现成的模板。
以 React Typescript 为例，当我们以此为模板创建一个 sandbox 时，会得到以下这么一些文件
image.png
所有组件文件都已经是 tsx 格式，甚至还有 tsconfig.json ，非常友好。

Prototype Rapidly
You can create web apps, experiment with code, test ideas, and share creations easily.
三、急速构建原型：你可以在 codesandbox 上创建web app，试验代码和想法，分享创作
codesandbox 的分享功能也是做得非常舒服的：

  1. 每一个sandbox（项目）都有独特的url，只需要分享链接就可以了（这种方式只能看不能编辑）
  2. 如果想让别人一起协同编写代码，点击右上角的 share 按钮可以配置

JS库版本控制

左下角Dependencies一栏可以看到当前项目的所有依赖库和版本信息
image.png
鼠标悬浮到指定的库，还可以看到后面的几个图标按钮，分别可以查看这个库的大小、更新这个库到最新版、移除库 —— 非常贴心方便！

外部资源

左下角的 External resources 一栏则可以自定义引入外部的静态资源，如 css 、font 等
image.png

导出项目

右上角菜单能够以zip压缩文件的形式导出当前sandbox项目，在本地解压后就是一个普通的 create-react-app 项目，跑一下 npm install 就能在本地开发了。
image.png

使用场景

分享我目前使用 codesandbox 的一些场景

快速构建临时的Web APP

前几天在帮朋友统计一个小问卷，问卷的答案有A到E 这5种选项，要统计每个选项被采用的个数。
我当时想，这不就是写个简单的计数器web app 就能快速解决的事儿吗？
我的本地虽然有测试用的 React 项目，但是以前测试的代码太多太杂了，我不想再搞它了；
使用 creat-react-app 再新建一个React APP 虽然可行，但是创建的过程还是太慢了；
于是我立刻想到了使用 codesandbox ，最终花了几分钟就搞定了，并且保存成了我自己的模板 React Counters - CodeSandbox

image.png

以后有这种需求，只要翻出这个模板简单修改就可以了。
这边只是以计数器为例，日常生活中还有其他一些小问题适合使用代码写出简单的工具帮助解决，这时 codesandbox 就是个非常理想的IDE了。

保存自己的代码片段

无论是工作还是学习过程中，当我遭遇问题找到了特别的解决方案、发现一些新的代码写法等，我通常会把他们记录下来。
有时候我会记录在 为知笔记 上，有时候我会记录在 Github gists 上，有些时候更适合记录在 codesandbox 上，因为 codesandbox 可以编译部署即时地看到UI效果。

分享代码

有时跟同事、实习生讨论某些技术问题的时候，在codesandbox写一些测试代码分享给对方，也是非常高效的学习和讨论途径。

轶事一则

前几天我的笔记本崩了，拿去公司电脑部门维修，那边说这是一个已知bug，需要美国那边的IT部门协助才能解决，给了我一个备用笔记本让我回去等消息。
我相当无语 —— 我可不想在备用笔记本上从头到尾再搭建一套开发环境。
在等待我笔记本回归的那2天，我在备用笔记本上基本只使用Chrome查查资料、看一些第三方库，在 codesandbox 上开发一些无关主业务的代码。我的笔记本回来后，我从 codesandbox 上把那些代码集成到公司项目里。
多亏了 codesandbox ，让我不至于在那2天毫无产出。

今天的分享就到这儿了，欢迎读者们去尝试 codesandbox ！
如果觉得这篇文章对你有帮助、启发，欢迎 点赞、喜欢、收藏三连！

引用

来源： https://zhuanlan.zhihu.com/p/268559657