网站建设项目结构分析报告,有没有专业做挂的网站吗,国家企业信用系统,微信公众号手机app更新#xff1a;文档地址#xff1a;http://vuese.org昨天发布了vuese1.0#xff0c;这是我的一个新的开源项目#xff0c;用来解析Vue SFC并生成markdown文档#xff0c;如下#xff1a;HcySunYang/vuesegithub.com这篇文章不会介绍如何使用#xff0c;至于如何使用大…更新文档地址http://vuese.org昨天发布了vuese1.0这是我的一个新的开源项目用来解析Vue SFC并生成markdown文档如下HcySunYang/vuesegithub.com这篇文章不会介绍如何使用至于如何使用大家可以查看 readme这里我们主要说一说实现的思路。一、动机你或者你的团队也许会有一套自己的组件库(或者是单纯的一个组件)通常当你开发完一个组件之后你需要手动的编写markdown文档从而让其他人了解组件是如何使用的。这里的问题在于假若组件不停的在更新你就必须要不停的手动维护对应的文档使其与组件的功能保持一致。实际上这个过程是有些恶心 的那么有什么更好的办法吗基于此我才开发了 vuese 。二、想法我们知道一个 vue 组件所暴露的接口无非是 props、events、slots(或scopedSlots) 以及部分 methods。那我们可不可以实现一个工具帮助我们分析一个vue组件并提取这些信息呢然后自动生成文档这样无论组件如何改动我们都不需要手动维护文档了只需要使用该工具重新生成即可。三、基本思路对于一个 vue 组件如果我们抛开 style 和自定义块那么它由两部分组成即模板 和 script 块。甚至如果使用 render 函数代替模板的话那么就只剩一下一个 script 了。对于 propsmethods 它们只能在 scirpt 块内定义如props: {name: String
}
methods: {clear () {/*...*/}
}而对于 slots 则既可以在 script 块内定义也可以在模板中定义如!-- 在模板中定义 --
divslot nameheader /
/div// 在 script 块内定义了 slots
render (h) {return h(div, this.$slots.header)
}
以上两种写法是等价的所以在提取 slots 信息时即需要考虑模板中的slots也要兼容 script 块内的 slots。而且在函数式组件中以下内容都应该作为 slots 处理// ctx.slots()
render (h, ctx) {return h(div, ctx.slots().xxx)
}// ctx.children
render (h, ctx) {return h(div, ctx.children)
}
这也是我们在提取slots信息时需要考虑在内的。同样的对于 events 而言也是既可以出现在模板中又可以出现在 script 块中如下!-- 模板中的 events --
div click$emit(onclear)/div// 定义在 script 中的事件
methods: {someMethod () {this.$meit(onclear)}
}
所以在提取 events 信息时也需要即考虑模板又考虑 script 块。对于模板我们默认是 html 语法对于 script 块我们默认为 js。我们要做的第一件事儿就是将 html 和 js 单独提取出来并单独分析好在巨人的肩膀厚实已经有了 vue/component-compiler-utils 模块和 vue-template-compiler 模块。其中我们使用 vue/component-compiler-utils 模块解析 vue SFC 并分别得到 html(模板) 和 JavaScript(script块) 的源码。对于 html 源码我们可以再次使用 vue-template-compiler 模块将其解析为模板对应的 AST然后通过编写一个 traverse 函数对其进行分析读取slots相关的内容。而对于 JavaScript 源码的处理我选择了使用 babel7写过 babel 插件的同学或许已经猜到了实现的思路。我们将源码交由 babel/travers 模块处理然后通过编写一些 helper 函数来辅助我们判断出哪些是要真正处理的内容即可如下源码段所示const mainTraveres {ObjectProperty(path: any) {// Processing nameif (isVueOption(path, name)) {if (onName) onName(path.node.value.value)}// Processing propsif (isVueOption(path, props)) {// 一些逻辑}// more...}
}其中 isVueOption 函数是我们自己编写的 helper 函数来辅助我们判断一个对象的属性是否是 Vue 选项对象中的特定属性如果是我们就进一步处理就可以了对于 js 的处理基本都是这个思路更多内容大家可以查看源码https://github.com/HcySunYang/vuese/blob/master/src/parser/parseJavascript.ts四、生成目标经过上一步的处理我们可以编写出一个 parser 模块解析并组装出我们需要的内容有了需要的内容之后我们就可以根据这些信息编写一个 Render 模块本质就是一个代码生成的过程至于生成的内容是什么这取决于你想要的目标vuese 内置的 Render 会根据这些信息为你生成 markdown 文件或者生成一个集成 docute 的文档。但实际上只要你脑洞够大你可以生成任何东西试想一下如果我们的 parser 模块编写的更加完善对一个 vue 组件的分析足够细致这样我们就能拿到一个 vue 组件全部的信息然后在代码生成阶段将其生成一个 ts compatible 的组件这不就实现了一个将非js编写的vue组件转换为ts兼容的vue组件的插件了吗备注后来一哥们儿提供了一个更好的办法来实现这件事儿为了避免尴尬我只能说这也是一个思路嘛......回到 vuese 内置的 Render 模块Render 的结果就是markdown资源本质就是一个字符串拼接的过程具体可以查看源码 https://github.com/HcySunYang/vuese/blob/master/src/render/index.ts 并不复杂。实际上 vuese 提供了很多有用的信息和文档中没有体现出来的功能这多会在后续逐渐补充。举个例子使用 vuese 生成的markdown文件大致如下你可能已经注意到了在上面的 markdown 文件中包含了很多诸如!-- vuese:CompName:props:start --!-- vuese:CompName:props:end --之类的注释它的作用是告诉 vuese 在生成文档时要将生成的 markdown 代码放置在什么位置如果一个组件还没有对应的markdown文档则新生成之否则会在已有的文档基础上更新。这么做的目的是出于真正使用场景的考虑因为一个组件的文档不可能仅仅包含上图中展示的内容它还可能包含开发者自己编写的demo和其他描述内容。这样我们生成文档的时候就不会覆盖掉开发者自己编写的内容而是将生成的内容插入到指定的位置。五、规划目前 vuese 已经实现的特性如下规划中要实现的特性如下另外目前还不支持插件系统这也在未来的规划当初。并且在我们团队内部已经将其应用在内部的组件库的文档维护也计划关注 vue3.0 并兼容之。最后 vuese 刚刚发布有诸多不足之处但是随着后续的更新迭代它会变得越来越好也欢迎感兴趣的同学共建。其他规划模板支持 pug、插件系统、还有啥
