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

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


image.png

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

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

创建沙盒

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

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

npm install -g codesandbox

codesandbox ./


  • 通过调用API方式创建沙箱[2]:
    CodeSandbox提供了通过API让我们可以通过编程的方式来创建sandbox。我们可以在文档里通过示例代码来创建sandbox,方便用户编辑和查看。
    通过Get和Post请求调用https://codesandbox.io/api/v1/sandboxes/define,即可实现创建CodeSandbox沙箱。
    Get调用Demo[3]   Post调用Demo[4]

Important:CodeSandBox官方Demo[5]

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

嵌入SandBox[7]

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

以官方Demo[8]为例:

  • 点击Share,这里选择Embed

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

类似CodeSandBox的在线编辑器有很多,比如:CodePen[9]、StackBlitz[10]、JSFiddle[11]、JSBin[12]、JSRun[13]等。

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

其他相关:

Code-Server[14]

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


Sandpack[15]

Sandpack 是 CodeSandbox 的浏览器打包器。


参考资料

[1]codesandbox.io: https://codesandbox.io/

[2]通过调用API方式创建沙箱: https://codesandbox.io/docs/importing#define-api

[3]Get调用Demo: https://codesandbox.io/s/6yznjvl7nw

[4]Post调用Demo: https://codesandbox.io/s/qzlp7nw34q

[5]CodeSandBox官方Demo: https://codesandbox.io/examples/package/codesandbox

[6]模板示例: https://hub.fastgit.org/ant-design/ant-design/blob/master/site/theme/template/Content/Demo/index.jsx

[7]嵌入SandBox: https://codesandbox.io/docs/embedding#embed-options

[8]官方Demo: https://codesandbox.io/s/react-new?from-embed=&file=/src/App.js

[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-server

[15]Sandpack: https://github.com/codesandbox/sandpack

front.png

相关文章
|
JavaScript
selenium--操作JS弹框
selenium--操作JS弹框
|
7月前
|
JavaScript
js 调试 —— 断点(含进入函数、条件断点等)
js 调试 —— 断点(含进入函数、条件断点等)
270 0
|
9月前
|
JavaScript 开发者
JS逆向 -- 本地调试
JS逆向 -- 本地调试
59 0
|
JavaScript 前端开发
JS实现选项卡功能
JS实现选项卡功能
42 0
|
JavaScript 前端开发
利用JS实现简单选项卡功能
利用JS实现简单选项卡功能
130 0
|
前端开发 JavaScript
js实现多种按钮
js实现多种按钮
109 0
|
Web App开发 JavaScript Shell
如何调试 vite 源码?
如何调试 vite 源码?
739 0
|
Web App开发 JavaScript
如何调试 vue3 源码
如何调试 vue3 源码
461 0
|
JavaScript
谷歌浏览器之如何调试页面js
谷歌浏览器之如何调试页面js
165 0
谷歌浏览器之如何调试页面js
|
Web App开发 JavaScript
chrome调试,打完断点后关于JS的几个控制介绍
打完断点之后,关于JS的几个控制介绍。   快捷键:F8 “逐过程执行”,继续执行代码,直到遇到下一个断点。   详细解释: 暂停和开始。当设置了断点之后,js的执行就暂停了,如果我们想要跳过当前的断点继续执行js,就可以点击这个按钮,点击之后js的执行会继续,如果在接下来的执行过程中再次遇到断点,那么就会在那个断点处暂停。
1171 0

热门文章

最新文章