Loading...
墨滴

混沌前端(微信公众号)

2021/09/06  阅读:33  主题:默认主题

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

image-20210906111439548
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/file-uploader-cli => https://githubbox.com/Iamxiaozhu/file-uploader-cli
  • 安装浏览器扩展,打开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
    Define API

    Get调用Demo[3] Post调用Demo[4]

Important:CodeSandBox官方Demo[5]

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

嵌入SandBox[7]

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

嵌入SandBox
嵌入SandBox

官方Demo[8]为例:

  • 点击Share,这里选择Embed

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

    嵌入SandBox配置
    嵌入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/codespaces

其他相关:

Code-Server[14]

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

Code-Server在线编辑器示例
Code-Server在线编辑器示例
Sandpack[15]

Sandpack 是 CodeSandbox 的浏览器打包器。

demo
demo

参考资料

[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

混沌前端(微信公众号)

2021/09/06  阅读:33  主题:默认主题

作者介绍

混沌前端(微信公众号)