关于antdesign:Antd中代码示例是怎么在CodeSandBox中打开的

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…