今天，給大家分享一個神器—— JavaScript線上沙箱環境 codesandbox.io
三個核心優勢
官方文檔寫了codesandbox 的三大優勢
Code Anywhere
An instantly ready, full-featured online IDE for web development on any device with a browser.
一、任何地方都能寫代碼：一個完備的線上web開發 IDE
界面左側和中間是類似於大多數IDE的佈局，右側還有即時編譯部署後的效果界面。
支持大多數常見的IDE功能，比如代碼格式調整，變量跳轉，基本的代碼提示等。
Start Quickly
With no setup, and templates for all popular frameworks to get you started quickly.
二、快速開始：codesandbox擁有所有流行框架的模板，方便你快速創建項目
如上圖所示，無論你是想寫 React 還是 Vue 、Angular，都有現成的模板。
以 React Typescript 爲例，當我們以此爲模板創建一個 sandbox 時，會得到以下這麼一些文件
所有組件文件都已經是 tsx 格式，甚至還有 tsconfig.json ，非常友好。
Prototype Rapidly
You can create web apps, experiment with code, test ideas, and share creations easily.
三、急速構建原型：你可以在 codesandbox 上創建web app，試驗代碼和想法，分享創作
codesandbox 的分享功能也是做得非常舒服的：
- 每一個sandbox（項目）都有獨特的url，只需要分享鏈接就可以了（這種方式只能看不能編輯）
- 如果想讓別人一起協同編寫代碼，點擊右上角的 share 按鈕可以配置
JS庫版本控制
左下角Dependencies一欄可以看到當前項目的所有依賴庫和版本信息
鼠標懸浮到指定的庫，還可以看到後面的幾個圖標按鈕，分別可以查看這個庫的大小、更新這個庫到最新版、移除庫 —— 非常貼心方便！
外部資源
左下角的 External resources 一欄則可以自定義引入外部的靜態資源，如 css 、font 等
導出項目
右上角菜單能夠以zip壓縮文件的形式導出當前sandbox項目，在本地解壓後就是一個普通的 create-react-app 項目，跑一下 npm install 就能在本地開發了。
使用場景
分享我目前使用 codesandbox 的一些場景
快速構建臨時的Web APP
前幾天在幫朋友統計一個小問卷，問卷的答案有A到E 這5種選項，要統計每個選項被採用的個數。
我當時想，這不就是寫個簡單的計數器web app 就能快速解決的事兒嗎？
我的本地雖然有測試用的 React 項目，但是以前測試的代碼太多太雜了，我不想再搞它了；
使用 creat-react-app 再新建一個React APP 雖然可行，但是創建的過程還是太慢了；
於是我立刻想到了使用 codesandbox ，最終花了幾分鐘就搞定了，並且保存成了我自己的模板 React Counters - CodeSandbox
以後有這種需求，只要翻出這個模板簡單修改就可以了。
這邊只是以計數器爲例，日常生活中還有其他一些小問題適合使用代碼寫出簡單的工具幫助解決，這時 codesandbox 就是個非常理想的IDE了。
保存自己的代碼片段
無論是工作還是學習過程中，當我遭遇問題找到了特別的解決方案、發現一些新的代碼寫法等，我通常會把他們記錄下來。
有時候我會記錄在 爲知筆記 上，有時候我會記錄在 Github gists 上，有些時候更適合記錄在 codesandbox 上，因爲 codesandbox 可以編譯部署即時地看到UI效果。
分享代碼
有時跟同事、實習生討論某些技術問題的時候，在codesandbox寫一些測試代碼分享給對方，也是非常高效的學習和討論途徑。
軼事一則
前幾天我的筆記本崩了，拿去公司電腦部門維修，那邊說這是一個已知bug，需要美國那邊的IT部門協助才能解決，給了我一個備用筆記本讓我回去等消息。
我相當無語 —— 我可不想在備用筆記本上從頭到尾再搭建一套開發環境。
在等待我筆記本回歸的那2天，我在備用筆記本上基本只使用Chrome查查資料、看一些第三方庫，在 codesandbox 上開發一些無關主業務的代碼。我的筆記本回來後，我從 codesandbox 上把那些代碼集成到公司項目裏。
多虧了 codesandbox ，讓我不至於在那2天毫無產出。
今天的分享就到這兒了，歡迎讀者們去嘗試 codesandbox ！
如果覺得這篇文章對你有幫助、啓發，歡迎 點贊、喜歡、收藏三連！