乐趣区

关于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…

退出移动版