前言
在 vuepress 剛出時栅组，我就覺得這是個很值得追更的開源項目钮糖。果不其然梅掠，里面眾多的前端編程技巧讓我受益良多。
于是在周末這種日子里店归，人家追劇我追碼阎抒。
今天，我就和大家分享下 vuepress 是如何做到在 Markdown 中使用 Vue 語法的消痛。
原理
眾所周知且叁，Markdown 是一種標(biāo)記語言，類似于 HTML秩伞，它也有對應(yīng)的語法和詞法逞带。而 Vue 說白了也是一種語法，關(guān)鍵在于纱新，Markdown 和 Vue 代碼都可以被解釋成 HTML展氓。
聰明的讀者應(yīng)該想到了：添加一個中間過程，讓 Vue 轉(zhuǎn)成 Markdown 或者讓 Markdown 轉(zhuǎn)成 Vue怒炸，是不是就可以實現(xiàn)在 Markdown 中使用 Vue 語法了呢带饱？
讓我們再考慮一下兩個方案的實現(xiàn)難點：
- Vue -> Markdown：template 和 style 部分還好毡代，可 js 部分怎么辦阅羹？
- Markdown -> Vue：可以將 markdown 代碼解釋成 html 或者 js 混入到 vue 代碼中勺疼。
很顯然，第二種方案實現(xiàn)起來更靠譜些捏鱼，所以尤雨溪也是這樣選的：
在語法之間的轉(zhuǎn)換工作上执庐，webpack 的 loader 可是很擅長的。所以导梆，vuepress 自定義了一個 markdownLoader 來將 Markdown 轉(zhuǎn)成 Vue轨淌，再通過 vue-loader 得到最終的 HTML。
代碼實現(xiàn)
markdownLoader
這是一個自定義的 loader看尼，可參考如何編寫一個 loader递鹉？
- 這個 loader 接收一個參數(shù)，里面包含一個 markdown-it 實例藏斩，作者用它來把 markdown 解釋成 html躏结。
- 得到 html 后將之包裹在 template 標(biāo)簽內(nèi)，返回狰域。
`<template>\n` +
`<div class="markdown">${html}</div>\n` +
`</template>\n`
主要過程其實就這兩步媳拴。當(dāng)然，vuepress 還在 markdownLoader 里做了很多其他的事情兆览，比如解析 yaml front matter屈溉、推斷標(biāo)題、獲取 markdown 里提升的 style抬探、script 等標(biāo)簽子巾。
自己實現(xiàn)一個 demo
接下來，大家可以跟我一起實現(xiàn)一個基本的 demo小压。完整代碼可見 github砰左。
-
新建一個 Vue 項目
我們使用 vue-cli(v2.9.6) 新建一個項目：
vue-cli 新建項目 編寫 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') } ] }
- 在 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 將這個組件添加進(jìn)路由里去
{
path: '/md',
name: 'Markdown',
component: Markdown
}
在 Markdown 中使用 React(JSX) 語法
既然可以在 markdown 里寫 vue，那在 markdonw 里面寫 react 理論上也是可以實現(xiàn)的：讓 markdownLoader 最后返回一個 React 組件场航，之后使用 babel-loader 轉(zhuǎn)成 js缠导。
這一次我們是將 markdown 轉(zhuǎn) jsx 再包裹在一個 React 組件(函數(shù)或者類)里：
return (
`import React from 'react';
${registerComponent}
function R() {
return (
<div>
<div className="markdown">${html}</div>
</div>)
}
export default R;\n`
)
有興趣的讀者可以自行實現(xiàn)完整的 react 版本的 markdownLoader 代碼。
結(jié)語
本文實現(xiàn)的 demo 只對 markdownLoader 的關(guān)鍵步驟做了實現(xiàn)溉痢，實際上還有很多問題需要解決僻造，如瀏覽器的 API 訪問限制、代碼塊和高亮的處理等需要解決孩饼，這篇文章就不涉及了髓削。
此系列文章還會給大家介紹 webpack 拓展、markdown-it 拓展镀娶、單元測試立膛、插件系統(tǒng)等。如果您喜歡這篇文章的話，別記得點個贊噢~
