vue組件文檔（.md）中自動導入示例（.vue）

癥結（懶癌患者）

在寫組件庫文檔的時候，會把示例代碼粘貼到文檔裏，這樣作有一個很噁心的地方：每次組件迭代或修改示例都須要從新修改文檔中的代碼片斷。終年累月，苦不堪言。

猜測（狂想曲）

因此我想，可不能夠把.vue文件裏的template塊和script塊取出來，放入對應的.md文件中

好比在.md文件中 {{:xx.vue?type=(template|script)}} 便替換示例中對應的template|script塊

# xx

## 示例代碼

// {{:}}  定義變量規則模版（加個冒號防衝突）
{{:image.vue?type=template}} // 對應.vue 的template

{{:image.vue?type=script}}  // 對應.vue 的script

{{: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

一步一步來吧：

一、將.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)) 
}

二、找到變量位置，塞進對應的.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直接返回文件內容
  })
};

三、從.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包地址