介绍
veture 最新进展
# 问题
.vue 文件是高度依赖 compiler-sfc 的(vue 版本不同会有所不同,vue2 是依赖 compiler-template 那个的,这也是导致兼容 vue23 的组件库极其难搞的原因), 而这个 sfc 的东西呢,它是一个单文件的性质,它只能分析本文件,不会沿着 import 去找,所以.vue 中是不能引用其他文件的 types 的。在 sfc 中的话呢,很多工具是不支持.vue 文件的,typedoc 分析不了,产生不了文档。
# 解决
如果想根本上解决这个问题,不太容易,因为相当于要 ast 一路找上去,然后剥离下来交给 sfc 解析,或者直接重写 sfc 解析(但也是要 ast 找的),这在开发环境性能是有问题的。只好勉强一点,把需求处理就好,原有一个 script 标签,现在可以写成多个(写成 script 标签就可以享受语法高亮和类型提示,不然就要自己写 vscode 插件了),然后专门分一个标记 types,专门用于写类型,然后抢在 sfc 解析之前,比如 vite 中的话你只要在 vue 插件之前或 pre 就行,把这个 types 标签拔出来整合到 script 标签,从而使得 sfc 解析正常,然后拔出来的部分专门生成一个文件,放在包内部。然后再用于 typedoc 去跑
# 进一步
也可以多加几个标签,比如再加个 script example ,里面写一个 props 的数据,直接在文档或 storybook 中跑出来一个 example,多写几个 example 标签就是不同的 example。我在 veture 中就是这样,现在 vue 插件之前把标签拔下来,在插件运行完后把 props 装回去
//test.vue 原本
export default let sfc=...//组件
//test.vue 更改后
export default let sfc=...//组件
let props1=...
export let props=[props1...]//数据
//引用就变成了
import Test, {props} from "./test.vue"
const {default:Test,props}=await import("./test.vue")
就可以在运行的项目中,按需解析出自己需要的东西,比如,可以添加一个docs标签,去写md文档,然后页面中就可以直接获得文档了。开发环境生产环境都是可行的