深刻淺出 VuePress（一）：如何作到在 Markdown 中使用 Vue 語法

前言

在 vuepress 剛出時，我就以爲這是個很值得追更的開源項目。果不其然，裏面衆多的前端編程技巧讓我受益良多。

因而在週末這種日子裏，人家追劇我追碼。

今天，我就和你們分享下 vuepress 是如何作到在 Markdown 中使用 Vue 語法的。

原理

衆所周知，Markdown 是一種標記語言，相似於 HTML，它也有對應的語法和詞法。而 Vue 說白了也是一種語法，關鍵在於，Markdown 和 Vue 代碼均可以被解釋成 HTML。

聰明的讀者應該想到了：添加一箇中間過程，讓 Vue 轉成 Markdown 或者讓 Markdown 轉成 Vue，是否是就能夠實如今 Markdown 中使用 Vue 語法了呢？

讓咱們再考慮一下兩個方案的實現難點：

1. Vue -> Markdown：template 和 style 部分還好，可 js 部分怎麼辦？
2. Markdown -> Vue：能夠將 markdown 代碼解釋成 html 或者 js 混入到 vue 代碼中。

很顯然，第二種方案實現起來更靠譜些，因此尤雨溪也是這樣選的：

在語法之間的轉換工做上，webpack 的 loader 但是很擅長的。因此，vuepress 自定義了一個 markdownLoader 來將 Markdown 轉成 Vue，再經過 vue-loader 獲得最終的 HTML。

代碼實現

markdownLoader

這是一個自定義的 loader，可參考如何編寫一個 loader？

1. 這個 loader 接收一個參數，裏面包含一個 markdown-it 實例，做者用它來把 markdown 解釋成 html。
2. 獲得 html 後將之包裹在 template 標籤內，返回。

`<template>\n` +
    `<div class="markdown">${html}</div>\n` +
`</template>\n`
複製代碼

主要過程其實就這兩步。固然，vuepress 還在 markdownLoader 裏作了不少其餘的事情，好比解析 yaml front matter、推斷標題、獲取 markdown 裏提高的 style、script 等標籤。

本身實現一個 demo

接下來，你們能夠跟我一塊兒實現一個基本的 demo。完整代碼可見 github。

1. 新建一個 Vue 項目 咱們使用 vue-cli(v2.9.6) 新建一個項目：

   

2. 編寫 markdownLoader

• 2.1 引入 markdown-it

  npm install markdown-it --save
  複製代碼

• 2.2 新建 markdownLoader 文件

  const markdown = require('markdown-it')
  
  module.exports = function(src) {
    const html = markdown().render(src)
    return (
      `<template>\n` +
      	`<div class="markdown">${html}</div>\n` +
      `</template>\n`
    )
  }
  複製代碼

• 2.3 在 webpack 的 module rules 配置中添加 markdownLoader

  {
    test: /\.md$/,
    use: [
      { loader: 'vue-loader' },
      {
        loader: require.resolve('./markdownLoader')
      }
    ]
  }
  複製代碼

3. 在 Vue 文件裏使用 markdown 文件

• 3.1 在 src/components 新建一個 markdown.md

## 我是一個 markdown 
{{1+2}}
複製代碼

• 3.2 在 src/router/index 中引入 markdown

const Markdown = () => import('@/components/markdown.md')
複製代碼

• 3.3 將這個組件添加進路由裏去

{
  path: '/md',
  name: 'Markdown',
  component: Markdown
}
複製代碼

在 Markdown 中使用 React(JSX) 語法

既然能夠在 markdown 裏寫 vue，那在 markdonw 裏面寫 react 理論上也是能夠實現的：讓 markdownLoader 最後返回一個 React 組件，以後使用 babel-loader 轉成 js。

這一次咱們是將 markdown 轉 jsx 再包裹在一個 React 組件(函數或者類)裏：

return (
    `import React from 'react';
    ${registerComponent}
    function R() {
        return (
        <div>
            <div className="markdown">${html}</div>
        </div>)
    }
    export default R;\n`
)
複製代碼

有興趣的讀者能夠自行實現完整的 react 版本的 markdownLoader 代碼。

結語

本文實現的 demo 只對 markdownLoader 的關鍵步驟作了實現，實際上還有不少問題須要解決，如瀏覽器的 API 訪問限制、代碼塊和高亮的處理等須要解決，這篇文章就不涉及了。

此係列文章還會給你們介紹 webpack 拓展、markdown-it 拓展、單元測試、插件系統等。若是您喜歡這篇文章的話，別記得點個贊噢~