image-20210906111439548
使用過Antd的小伙伴應(yīng)該很熟悉写烤，Antd組件文檔有在CodeSandBox和CodePen中打開直接預(yù)覽和編輯的功能鲤氢，這么炫酷且實(shí)用的功能具體是怎么實(shí)現(xiàn)的？
codesandbox.io[1] 是一個(gè)前端代碼的在線編輯器优幸，支持各種不同的框架，可以隨時(shí)預(yù)覽代碼的運(yùn)行結(jié)果。
創(chuàng)建沙盒
“在CodeSandBox中打開”是CodeSandbox提供的功能胯盯，讓我們可以通過直接調(diào)用API來創(chuàng)建CodeSandbox沙盒。
CodeSandbox提供了幾種導(dǎo)入到沙盒中預(yù)覽的方式：
直接使用提供的公共模板
從GitHub導(dǎo)入：https://codesandbox.io/s/github
使用GitHubBox：將倉庫地址中g(shù)ithub.com替換為githubbox.com
- https://github.com/Iamxiaozhu/file-uploader-cli => https://githubbox.com/Iamxiaozhu/file-uploader-cli
安裝瀏覽器擴(kuò)展计露，打開GitHub博脑，頁面中會(huì)添加一個(gè)“在CodeSandBox中打開”的按鈕
-
通過命令行從本地導(dǎo)入：
npm install -g codesandbox codesandbox ./ -
通過調(diào)用API方式創(chuàng)建沙箱[2]：
CodeSandbox提供了通過API讓我們可以通過編程的方式來創(chuàng)建sandbox憎乙。我們可以在文檔里通過示例代碼來創(chuàng)建sandbox，方便用戶編輯和查看叉趣。
通過Get和Post請求調(diào)用
https://codesandbox.io/api/v1/sandboxes/define泞边，即可實(shí)現(xiàn)創(chuàng)建CodeSandbox沙箱。Define API
Get調(diào)用Demo[3] Post調(diào)用Demo[4]
Important：CodeSandBox官方Demo[5]
Antd中示例代碼跳轉(zhuǎn)CodeSandbox疗杉、CodePen等：模板示例[6]
嵌入SandBox[7]
CodeSandBox還支持直接嵌入：在文檔阵谚，博客和其他網(wǎng)站中嵌入沙箱，可以展示代碼和預(yù)覽效果:
嵌入SandBox
以官方Demo[8]為例:
-
點(diǎn)擊Share,這里選擇Embed
嵌入SandBox
-
自定義展示內(nèi)容和主題烟具，復(fù)制嵌入代碼就可以了梢什，是通過iframe標(biāo)簽來嵌套頁面。
嵌入SandBox配置
類似CodeSandBox的在線編輯器有很多朝聋，比如：CodePen[9]嗡午、StackBlitz[10]、JSFiddle[11]冀痕、JSBin[12]翼馆、JSRun[13]等。
微軟和GitHub也都推出了自己的在線代碼編輯器(和上面幾個(gè)不同金度，只提供了代碼編輯功能应媚，無法實(shí)時(shí)預(yù)覽)：
Online VS：https://online.visualstudio.com/
GitHub CodeSpaces: https://github.com/features/codespaces
其他相關(guān)：
Code-Server[14]
這里推薦一個(gè)可以自定義部署的在線代碼編輯器：Code-Server。實(shí)際上就是VSCode的在線版本猜极，支持安裝VSCode插件中姜，內(nèi)嵌Terminal中會(huì)直接在服務(wù)器端運(yùn)行，非常強(qiáng)大跟伏。
Code-Server在線編輯器示例
Sandpack[15]
Sandpack 是 CodeSandbox 的瀏覽器打包器丢胚。
demo
參考資料
[1]
odesandbox.io: https://codesandbox.io/
[2]
過調(diào)用API方式創(chuàng)建沙箱: https://codesandbox.io/docs/importing#define-api
[3]
et調(diào)用Demo: https://codesandbox.io/s/6yznjvl7nw
[4]
ost調(diào)用Demo: https://codesandbox.io/s/qzlp7nw34q
[5]
odeSandBox官方Demo: https://codesandbox.io/examples/package/codesandbox
[6]
板示例: https://hub.fastgit.org/ant-design/ant-design/blob/master/site/theme/template/Content/Demo/index.jsx
[7]
入SandBox: https://codesandbox.io/docs/embedding#embed-options
[8]
方Demo: https://codesandbox.io/s/react-new?from-embed=&file=/src/App.js
[9]
odePen: https://codepen.io/
[10]StackBlitz: https://stackblitz.com/
[11]JSFiddle: https://jsfiddle.net/
[12]JSBin: https://jsbin.com/
[13]JSRun: http://jsrun.net/
[14]Code-Server: https://github.com/cdr/code-server
[15]Sandpack: https://github.com/codesandbox/sandpack
