共计 2686 个字符，预计需要花费 7 分钟才能阅读完成。
症结（懒癌患者）
在写组件库文档的时候，会把示例代码粘贴到文档里，这样做有一个很恶心的地方：每次组件迭代或修改示例都需要重新修改文档中的代码片段。长年累月，苦不堪言。
猜想（狂想曲）
所以我想，可不可以把.vue 文件里的 template 块和 script 块取出来，放入对应的.md 文件中
比如在.md 文件中 {{:xx.vue?type=(template|script)}} 便替换示例中对应的 template|script 块
# xx
## 示例代码
// {{:}} 定义变量规则模版（加个冒号防冲突）
{{:image.vue?type=template}} // 对应.vue 的 template
{{:image.vue?type=script}} // 对应.vue 的 template
{{:index.js}} // 对应 index.js
## 参数说明
xxx…
output
# xx
## 示例代码
// image.vue template
<template>
<div>xx</div>
</template>
// image.vue script
<script>
…
</script>
// index.js
var x = 1
## 参数说明
xxx…
动手（能动手绝不 **）
要实现以上功能，需要探索以下几点：
从.vue 里取出 template&script
塞进对应的.md 的变量位置
将.md 文件转为 Vue Componet / html
如果按照我们写 js 的习惯，以下嵌套排列可能更易读
将.md 文件转为 Vue Componet / html
找到变量位置，塞进对应的.md 的指定位置
从.vue 里取出 template&script
一步一步来吧：
1、将.md 文件转为 Vue Componet / html
要想在 vue 中使用.md 文件为组件，只需要用 loader 将 md 转成 Vue Componet 即可。
这个过程很简单, 以下为 loader 伪代码
const wrapper = content => `
<template>
<section v-html=”content” v-once />
</template>
<script>
export default {
created() {
this.content = content
}
};
</script>
`
module.exports = function(source) {
// markdown 编译用的 markdown-it
return wrapper(new MarkdownIt().render(source))
}
2、找到变量位置，塞进对应的.md 的指定位置
1) 找到变量位置
使用正则匹配定义的规则，找到被 {{:}} 包围的字符串，如上例所示则为‘image.vue?type=template’
2) 读取文件
如果是其他.js、.html 等普通文件，直接使用 fs.readFileSync 读取替换即可，因是.vue, 我们希望传入 type 来获取不同的块（template、script 等）
const replaceResults = (template, baseDir) => {
const regexp = new RegExp(“\\{\\{:([^\\}]+)\\}\\}”, “g”)
return template.replace(regexp, function(match) {
// 获取文件变量
match = match.substr(3, match.length – 5)
let [loadFile, query=”] = match.split(‘?’)
// 读取文件内容
const source = fs.readFileSync(path.join(baseDir, loadFile), “utf-8”).replace(/[\r\n]*$/, “”)
if (path.extname(loadFile) === “.vue”) {
let {type} = loaderUtils.parseQuery(`?${query}`)
return replaceVue(source, type) // 根据 type 提取.vue 里的不同块
}
return source // 非.vue 直接返回文件内容
})
};
3、从.vue 里取出 template&script
const replaceVue = (source, type) => {
const descriptor = templateCompiler.parseComponent(source)
const lang = {
template: ‘html’,
script: ‘javascript’ //,
// style: ‘css’
}
return lang[type] && `
\`\`\`${lang[type]}
${descriptor[type].content}
\`\`\`
`
}
如若要取一个文件里的多个块，则需多次调用，考虑到我们的组件库场景，默认返回 template 和 script(未使用 type 参数时), 对上面代码进行优化，一次性从.vue 中取出多个块
// replaceVue(source, [type])
const replaceVue = (source, types = [‘template’, ‘script’]) => {
const descriptor = templateCompiler.parseComponent(source)
const lang = {
template: ‘html’,
script: ‘javascript’ //,
// style: ‘css’
}
return types.map(type => lang[type] && `
\`\`\`${lang[type]}
${descriptor[type].content}
\`\`\`
`).join(”)
}
大功告成????????！那么，如何使用呢？
使用（给我小星星????）
安装
npm i vue-markd-loader -D
配置
rules: [{
test: /\.md$/,
use: [
‘vue-loader’,
{
loader: ‘vue-markd-loader’,
options: {
replaceFiles: true , // 默认 true, 是否将文件填充进 md
wrapper:true // 默认 true, 默认输出 Vue Component ,false 时输出 html 片段
}
}
]
}]
// main.js
import ‘highlight.js/styles/github.css’ // 可以使用任意喜欢的主题哟
import ‘github-markdown-css’
其他
第一次撸 webpack loader, 如有不正确 / 不足的地方，欢迎指正。
源代码 git 地址
npm 包地址
