癥結(懶癌患者)
在寫組件庫文檔的時候,會把示例代碼粘貼到文檔裏,這樣做有一個很噁心的地方:每次組件迭代或修改示例都需要重新修改文檔中的代碼片段。長年累月,苦不堪言。
猜想(狂想曲)
所以我想,可不可以把.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
,如有不正確/不足的地方,歡迎指正。