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/file-uploader-cli => https://githubbox.com/Iamxiaozhu/file-uploader-cli
-
安装浏览器扩展，打开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/codespaces
其他相关：
Code-Server[14]
这里推荐一个可以自定义部署的在线代码编辑器：Code-Server。实际上就是VSCode的在线版本，支持安装VSCode插件，内嵌Terminal中会直接在服务器端运行，非常强大。
Code-Server在线编辑器示例
Sandpack[15]
Sandpack 是 CodeSandbox 的浏览器打包器。
demo
参考资料
[1]
odesandbox.io: https://codesandbox.io/
[2]
过调用API方式创建沙箱: https://codesandbox.io/docs/importing#define-api
[3]
et调用Demo: https://codesandbox.io/s/6yznjvl7nw
[4]
ost调用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
网友评论