webpack pulgin插件思路逻辑

52 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第14天,点击查看活动详情

上篇文章 webpack pulgin插件主体编写我们把打包的顺序和一些webpack的hooks,和创建新的html,这篇文章我们开发是.md文件转化为html文件的逻辑了,这里主要是对我们拿到.md文件的字符串, 对字符串进行处理,怎么把字符串转化为html标签,这种事最麻烦的,有两种方案进行选择,

1、是对字符串进行逐个的分析,分析完了去替换一些内容,如{{}}里的内容和一些属性、标签,尖括号等一些特殊字符,后面我们还要对这个方法进行优化,这种方式就是分析一段会删一段,会比较负责,vue2就是用的这个方式。

2、就是比较简单方式就是把字符串分成一个个的数组,再对每个数组进行单独的处理,以我们要实现的为例,看看我们.md文件的内容是什么,如下 .md文件

# 这是h1
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4

## 这是h2
1. 这是有序1
1. 这是有序2
1. 这是有序3
1. 这是有序4

我们这次只做上面的几种固定的情况,复杂不做,规则 #是h1,##是h2标签,-是无序列表只能是连续的才会转成ul的li标签,连续的1 2 3 4才会转成ol的li。不能把所有-都转化,1 2 3 4这种序号也是同理也不能都都转化。

思路主要是先做一个分类,举个例子,像#和-这样其实就是两个分组,标签不一样就是一个组,还需要判断它有没有父标签,像#这种h1的就没有父标签,想- 或者有 1 2 3这种序号的就有就是有父标签ul的,我们还需要想一下,我们要把这个字符串,转为什么样的数据结构才能方便使用,创建dom呢,会在webpack pulgin插件文本转html逻辑编写 揭晓(如果点不开说明文章还没发)