遇事不慌-手撸一个Vue-markdown-loader！

Created By JishuBao on 2019-04-22 12:38:22
Recently revised in 2019-04-23 20:59

 

  欢迎大家来到技术宝的掘金世界,您的star是我写文章最大的动力！GitHub地址   
   
  最近新公司在制定一套UI规范,说是为了以后前端“即托即用”做准备。   

  本来前端人数就不多的我和我的小郝哥开始抓紧了节奏，准备开始写一些UI规范，但是由于我们俩都没有完整的了解过相关的方面的制作,我们在文档上煞费苦心,在制作UI规范文档中，我们发现在Vue中并不能直接像markdown一样写一些代码注释等。导致需要这样写，大家感受下：   

其实我们的内心是崩溃的！如果每写一个都这样的话,咋整！也不是说难，就是太繁琐，咱也不敢想！所以技术宝觉得这样不行，然后灵机一动想到平时所用的ui框架vant，人家的官网做的是多么的好看,然后我打开了vant的源码,一开始我是没怎么看懂，后来我发现他用的是md文档，当时我心想，这么so easy的吗？

然后我直接引入了markdown文档格式文件md文件，然后...

what the fuck 什么鬼？

明明别人的就能引入不报错,然后我发现那些Ui框架里面的package.json文件里面基本上都有一个vue-markdown-loader，机智的我很快就反应过来,他不识别md格式,就和不加vue-loader不能使用Vue一样,所以我们还是要加上这个vue-markdown-loader，技术宝这个时候突然萌生了一个想法，如果自己写一个loader呢，这样以来，既能理解，又能够对于这个loader了如指掌。话不多啥，开始启动我们的教程吧。

一、前置知识

你需要知道loader是干嘛用的，其实Loader就相当于一个“处理器”,将ts文件转化为js文件,将图像转化成内联data url等...

我们来写一个简单的loader

module.exports = function (src) {
  const res = (
    `<template>\n` +
    `<h1>hello world</h1>\n` +
    `</template>`
  )
  return res
}
复制代码

我承认这个loader长的确实是有一点智障的,但是这个Loader确实也做到了大部分Loader所做的事。

1. 你需要知道loader是干嘛用的。
2. 需要安装相对应的辅助工具包。

包名称	功能说明
markdown-it	渲染markdown基本语法
markdown-it-anchor	为各级标题添加瞄点
markdown-it-container	用于创建自定义的块级容器
markdown-it-emoji	渲染emoji
markdown-it-table-of-contents	自动生成目录
highlight.js	代码高亮
hash-sum	产生一个基于的四字节十六进制哈希value
lru-cache	一个缓存对象，用于删除最近最少使用的项目

三、项目书写中遇到的问题/知识点

1.md文档中h1/h2标签大小一致

发现已经是解析成h1了为啥还会不一样呢？通过我机智的观察，我们在控制台发现了这么一坨代码！

这是谷歌浏览器默认样式，不同的浏览器都有对应不同的默认样式，那么我们如何取消默认样式呢？由于浏览器的默认样式优先级都会比较低，那么我们只需要在reset.css里面重置样式即可。

section h1{
    font-size:2em;
}
复制代码

参考链接：h1和h2大小一致、如何去掉浏览器的默认样式

2.js方法replace方法

语法

stringObject.replace(regexp/substr,replacement)

参数

参数	参数类型	描述	是否必需
stringObject	字符串	一个字符串类型的值