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

1,891 阅读2分钟

文章首发微信公众号“混沌前端”。

image-20210906111439548

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

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

创建沙盒

“在CodeSandBox中打开”是CodeSandbox提供的功能,让我们可以通过直接调用API来创建CodeSandbox沙盒。

CodeSandbox提供了几种导入到沙盒中预览的方式:

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

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

Define API

Get调用Demo Post调用Demo

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

嵌入SandBox

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

嵌入SandBox

官方Demo为例:

  • 点击Share,这里选择Embed

    嵌入SandBox

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

    嵌入SandBox配置

类似CodeSandBox的在线编辑器有很多,比如:CodePenStackBlitzJSFiddleJSBinJSRun等。

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

其他相关:

Code-Server

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

Code-Server在线编辑器示例

Sandpack

Sandpack 是 CodeSandbox 的浏览器打包器。

demo

欢迎关注微信公众号“混沌前端”,分享技术、工作和生活。