我最近在用 babel 做一个代码生成的 node 服务，把一个配置对象转成可以运行的 TS 代码。
整个过程大概是先根据配置对象生成 AST，最后再用@babel/generator转为代码。
生成 AST 用的主要是@babel/types和@babel/template两个包。
使用过的小伙伴应该知道@babel/typesAPI 非常多，AST 节点类型非常多，初学时不熟悉写起来很困难，需要看着包内的.d.ts文件一点一点写。而且还需要看到生成出的 AST 转成的代码是什么样才知道怎么调整。
我刚开始就是这样，学起来挺难受的。所以我做了一个 playground 工具，可以将自己代码的运行结果实时的展示出来，包括生成的目标代码和 AST 结构。
界面是这个样子：
左侧是 monaco 编辑器，已经导入了 babel 相关的包，可以直接使用。
当你把生成的 AST 结果 export default 出去，右侧就会显示出转成的目标代码和 AST JSON 结构，并且都是美化过的🎉。
部分功能说明：
类型提示
编辑器已经引入了 babel 相关的类型声明文件，拥有良好的类型提示。
日志输出
当你写了 console 想输出某些内容时，可以直接打开控制台查看，你输出的内容会加上一个带有样式的前缀，方便辨认。
第三方包
如果你想使用第三方包，可以直接导入使用，无需配置。
但是出于性能考虑，暂时还不支持自动引入类型声明文件，后续可能会加入此功能。
忽略多余 AST 节点
如果你想查看完整的 AST 结构，可以选中展示完整 AST，此时会展示全部 AST 节点，以 File 节点为根节点。
不选中时只展示你 export default 出的 AST 节点。
持久化
编辑器里的代码做了持久化处理，你可以随意刷新页面，代码不会丢失，下次再进入时也还会显示上次写的代码。
