能直接在 Ant Design 官网修改并运行示例同时也有 typescript 类型的浏览器扩展

369 阅读1分钟

在浏览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或者右键点击运行菜单运行.结果将原挂载到原有示例的位置

ant-design.antgroup.com_components_button-cn (1).png

原理

编辑后的代码使用babel转换完成js之后插入页面中

babel-stone

@babel/standalone · Babel (babeljs.io)

运行在浏览器中的Babel,将tsx代码转为js

monaco-editor

Monaco Editor (microsoft.github.io)

vscode同款web编辑器