Vue组件库系列三:打造属于自己的 UI 库文档(新版本的方案)

上一章介绍了element-ui老版本中md文档构建过程，如果大家认真看了，就会发现在.md文档中还是有一些重复的部分，怎样使文档看着更加简洁，操作更加方便，饿了么团队下了很大的力气做了探索，现在我们一起分享这个成果

我们先来看看input.md新文档是怎么写的

对比老版本的input.md文档，我们发现少了最开始的<script>...</script>，但是我们操作页面，发现JavaScript交互仍然是正常的，页面底部也未报错，说明原本模板里面的JavaScript被抽出来”共享“了

接下来，我们逐步去分析element是如何实现这个创举.

1、添加依赖

这一步和之前没多大的区别

yarn add markdown-it markdown-it-container markdown-it-chain markdown-it-anchor transliteration @vue/component-compiler-utils vue-template-compiler -D

2、配置loader

查看build/webpack.demo.js下面关于md格式的解析器配置，可以发现新版本用了一个自定义的md-loader

3、分析md-loader

打开md-loader/index.js我们发现用到了几个工具函数

具体方法如下：

前面两个是用来提取script和style标签里面的内容，这个很厉害哦，这样做是为啥，请继续接着看

genInlineComponentText这个函数就跟厉害了，它将一个模板template和模板对应的script转成一个内联组件并返回。也就是说element将:::demo ```html 例子 ``` :::中间的例子转成一个个内联component注入到整个页面中，这样就完美的实现了JavaScript交互。是不是很机智

接下来，我们看看config.js里面的内容

发现和老版本里面一样，都是用了markdown-it-chain，markdown-it-anchor，前者是markdown-it的链式操作，后者是生成锚点，如下图圈起来的部分

transliteration这个函数是用来将中文标题翻译成拼音，并用”-“连接符连接。如“npm 安装

”翻译成“npm-an-zhuang”

然后，我们看看container.js里面具体干了啥

惊不惊喜，意不意外，还是用到了markdown-it-container解析md文档内容。validate表示检测以"::: demo"开始的都符合条件，当我们写:::demo :::这样的语法时才会进入自定义渲染方法。render里面用到了一个占位符<!--element-demo: ${content}:element-demo-->，这个将在后面介绍其作用，render方法主要讲md文档包裹一层我们自定义的组件<demo-block>，md文档被当做slot传入

接下来，我们看看fence.js做了啥

好像文档注释已经解释了，覆盖默认的markdown-it fence渲染规则，这段代码主要高亮显示md里面的代码（还需要highlight.js的css样式文件支持）

最后，我们看一下index.js是怎么将这几部分串起来的

总的来看，index.js返回的是一个function，然后我们看到在container.js中定义的<!--element-demo:占位符以及之前util里面定义的stripTemplate，stripScript，genInlineComponentText，我们看到在while循环中不断生成<template slot="source"><${demoComponentName} /></template>，最后组成一个新的组件

4、看看demo-block组件，这个出现在container.js里面，还记得吗？

里面有<slot name="source"></slot>，<div class="description" v-if="$slots.default"> <slot></slot> </div>，<slot name="highlight"></slot>分别对应着生成的内联组件，组件描述语句和高亮源码三部分。

验证解说

刚刚说的比较散，大家理解可能有断点，接下来我将element-ui组件文档中的input.md来看看具体的解析过程，下面是选取的一段md文档

我们在build/md-loader/index.js里面打印出两个点，看看到底是什么东东

source其实就是我们的md文档内容

content是利用md解析器解析的html

这里的占位符<!--as-ui-demo:是我自定义的，你也可以根据自己的喜好设定。我们再看看通过index.js里面的函数解析之后是什么样的

是不是和我上面解说的一致？

运行效果如下，是不是很期待去自己试试

总结

好了，到这里应该全部讲完了新版组件文档的生成过程，大家可以参照整个流程去理解，也可以参照element-ui里面的源码去自己体验一把。纸上得来终觉浅，自己敲一敲，瞧一瞧，才能有更深的理解。

下一章，将带大家去理解element-ui如何实现组件按需引入的，这也是自己编写组件库不可不知的点！大家可以先行进行思考下方案