在浏览Ant Design的demo时,有时候想试一下不同属性的效果,通常情况下我们需要复制代码到本地进行调试或者使用CodeSandbox或者CodePen等网站进行编辑调试,但这些网站有时在国内的访问速度特别慢
Ant Design Runner - Microsoft Edge Addons 就是一个能直接在Ant Design官网编辑并运行示例代码同时也有 typescript 类型提示
扩展
在 Microsoft Edge 的扩展商店里提供antd-v4和antd-v5两个插件
使用
点击编辑器图标即可使用 monaco-editor 对示例进行编辑,修改完成之后 ctrl+s/⌘+s或者右键点击运行菜单运行.结果将原挂载到原有示例的位置
原理
编辑后的代码使用babel转换完成js之后插入页面中
babel-stone
@babel/standalone · Babel (babeljs.io)
运行在浏览器中的Babel,将tsx代码转为js
monaco-editor
Monaco Editor (microsoft.github.io)
vscode同款web编辑器