癥結（懶癌患者）
在寫組件庫文檔的時候，會把示例代碼粘貼到文檔里，這樣做有一個很惡心的地方：每次組件迭代或修改示例都需要重新修改文檔中的代碼片段。長年累月，苦不堪言。
猜想（狂想曲）
所以我想，可不可以把.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.jsvar x = 1## 參數說明xxx...
動手（能動手絕不**）
要實現以上功能，需要探索以下幾點：
如果按照我們寫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("http://{//{:([^//}]+)//}//}", "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,如有不正確/不足的地方，歡迎指正。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
