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 codesandboxcodesandbox ./

  • 通过调用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...