通过读取ts注释，生成组件文档系统

这篇是对我之前写的【从0到1 开发一个自己的ui库】的一个补充，之前只写了自定义开发一个ui库，现在对自己开发的ui库进行ts注释解析，然后生成一个文档说明。先呈现这个文档系统效果截图吧。

文档的访问地址：https://lishengqin.github.io/standard-vue-cockpit-ui/

github仓库地址：https://github.com/lishengqin/standard-vue-cockpit-ui

 

 

 

 生成文档的关键，就是【脚本读取ts注释】，【markDown】，【vite的import静态资源】。

核心逻辑：

1. 首先通过【脚本读取ts注释】，生成一个json，然后开发一个组件【PropsRenderDoc.vue】专门读取json中对应组件的属性信息，这样完成文档的第一步，展示组件的各属性。读取注释的脚本太长了，在这里就不放出来了，脚本文件对应的地址是：https://github.com/lishengqin/standard-vue-cockpit-ui/blob/master/script/slice_expample.js，可以在仓库地址：https://github.com/lishengqin/standard-vue-cockpit-ui，去拉取代码看看。核心代码：

const program = ts.createProgram([file], { allowJs: true });
const sourceFile = program.getSourceFile(file);
ts.forEachChild(sourceFile, node => {
    // 可以把node打印出来看，会有想要的
}）

2. 第二步我们要展示示例效果以及示例源码，这时候就需要【vite的import静态资源】。比如展示按钮组件的基础用法，代码片段如下：

　<component :is="render"></component>

  <div class="example-source">{{ comStr }}</div>

const getRenderAndStr = () => {
  import(`../test/lsq-button/basic.vue`).then(renderModule => {
    render.value = renderModule.default; // 读取到组件
  });
  import(`../test/lsq-button/basic.vue?raw`).then(comStrModule => {
    comStr.value = comStrModule.default; // 读取到组件的文本格式
  });
};