image-20210906111439548
应用过 Antd 的小伙伴应该很相熟，Antd 组件文档有在 CodeSandBox 和 CodePen 中关上间接预览和编辑的性能，这么炫酷且实用的性能具体是怎么实现的？
codesandbox.io[1] 是一个前端代码的在线编辑器，反对各种不同的框架，能够随时预览代码的运行后果。
创立沙盒
“在 CodeSandBox 中关上”是 CodeSandbox 提供的性能，让咱们能够通过间接调用 API 来创立 CodeSandbox 沙盒。
CodeSandbox 提供了几种导入到沙盒中预览的形式：
- 间接应用提供的公共模板
- 从 GitHub 导入：https://codesandbox.io/s/github
- 应用 GitHubBox：将仓库地址中 github.com 替换为 githubbox.com
- https://github.com/Iamxiaozhu… => https://githubbox.com/Iamxiao…
- 装置浏览器扩大，关上 GitHub，页面中会增加一个“在 CodeSandBox 中关上”的按钮
-
通过命令行从本地导入：
npm install -g codesandbox codesandbox ./ -
通过调用 API 形式创立沙箱 [2]：
CodeSandbox 提供了通过 API 让咱们能够通过编程的形式来创立 sandbox。咱们能够在文档里通过示例代码来创立 sandbox，不便用户编辑和查看。
通过 Get 和 Post 申请调用
https://codesandbox.io/api/v1/sandboxes/define，即可实现创立 CodeSandbox 沙箱。Define API
Get 调用 Demo[3] Post 调用 Demo[4]
Important：CodeSandBox 官网 Demo[5]
Antd 中示例代码跳转 CodeSandbox、CodePen 等：模板示例 [6]
嵌入 SandBox[7]
CodeSandBox 还反对间接嵌入：在文档，博客和其余网站中嵌入沙箱，能够展现代码和预览成果:
嵌入 SandBox
以官网 Demo[8] 为例:
-
点击 Share, 这里抉择 Embed
嵌入 SandBox
-
自定义展现内容和主题，复制嵌入代码就能够了，是通过 iframe 标签来嵌套页面。
嵌入 SandBox 配置
相似 CodeSandBox 的在线编辑器有很多，比方：CodePen[9]、StackBlitz[10]、JSFiddle[11]、JSBin[12]、JSRun[13] 等。
微软和 GitHub 也都推出了本人的在线代码编辑器 (和下面几个不同，只提供了代码编辑性能，无奈实时预览)：
- Online VS：https://online.visualstudio.com/
- GitHub CodeSpaces: https://github.com/features/c…
其余相干：
Code-Server[14]
这里举荐一个能够自定义部署的在线代码编辑器：Code-Server。实际上就是 VSCode 的在线版本，反对装置 VSCode 插件，内嵌 Terminal 中会间接在服务器端运行，十分弱小。
Code-Server 在线编辑器示例
Sandpack[15]
Sandpack 是 CodeSandbox 的浏览器打包器。
demo
参考资料
[1]codesandbox.io: https://codesandbox.io/
[2] 通过调用 API 形式创立沙箱: https://codesandbox.io/docs/i…
[3]Get 调用 Demo: https://codesandbox.io/s/6yzn…
[4]Post 调用 Demo: https://codesandbox.io/s/qzlp…
[5]CodeSandBox 官网 Demo: https://codesandbox.io/exampl…
[6] 模板示例: https://hub.fastgit.org/ant-d…
[7] 嵌入 SandBox: https://codesandbox.io/docs/e…
[8] 官网 Demo: https://codesandbox.io/s/reac…
[9]CodePen: 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-s…
[15]Sandpack: https://github.com/codesandbo…