Antd中示例代码是怎么直接在CodeSandBox中打开的

使用过Antd的小伙伴应该很熟悉，Antd组件文档有在CodeSandBox和CodePen中打开直接预览和编辑的功能，这么炫酷且实用的功能具体是怎么实现的？

codesandbox.io 是一个前端代码的在线编辑器，支持各种不同的框架，可以随时预览代码的运行结果。

创建沙盒

“在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方式创建沙箱：

  Antd的文档中就是使用Define API的方式创建沙箱的：CodeSandbox提供了通过API让我们可以通过编程的方式来创建sandbox。我们可以在文档里通过示例代码来创建sandbox，方便用户编辑和查看。

  通过Get和Post请求调用https://codesandbox.io/api/v1/sandboxes/define，即可实现创建CodeSandbox沙箱。

  

  Get调用Demo Post调用Demo

Important：CodeSandBox官方Demo

Antd中示例代码跳转CodeSandbox、CodePen等：模板示例

嵌入SandBox

CodeSandBox还支持直接嵌入：在文档，博客和其他网站中嵌入沙箱，可以展示代码和预览效果:

以官方Demo为例:

• 点击Share,这里选择Embed

  

• 自定义展示内容和主题，复制嵌入代码就可以了，是通过iframe标签来嵌套页面。

  

类似CodeSandBox的在线编辑器有很多，比如：CodePen、StackBlitz、JSFiddle、JSBin、JSRun等。

微软和GitHub也都推出了自己的在线代码编辑器(和上面几个不同，只提供了代码编辑功能，无法实时预览)：

• Online VS：https://online.visualstudio.com/
• GitHub CodeSpaces: https://github.com/features/c...

其他相关：

Code-Server

这里推荐一个可以自定义部署的在线代码编辑器：Code-Server。实际上就是VSCode的在线版本，支持安装VSCode插件，内嵌Terminal中会直接在服务器端运行，非常强大。

Sandpack

Sandpack 是 CodeSandbox 的浏览器打包器。