webpack 开发自定义插件前期一些可用数据推断和部分方法说明

小强112233
40 阅读2分钟

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

上一篇文章 webpack pulgin插件思路逻辑 主要是逻辑和规则的描述，这里主要是想把.md的怎么转化成我们能用的数据，大概我们想要转成的数据

 为啥要加随机数，应该可能会有很多h1 ul div span 的这些标签 他们并不是一组的 要区分开
 {
    h1-随机数: {
       type: "single", // 这个属性代表着有没有父标签 single是没有 warper是有
       tags: [<h1>dadas</h1>],
    },
    ul-随机数: {
       type: "warper",
       tags: [
          ‘<li>dasdasdas</li>’
          ‘<li>dasdasdas</li>’
          ‘<li>dasdasdas</li>’
       ]
    },
 }

我们只需要对从.md文件拿出来的数据做字符串切割就是得到下面的数据

const  _mdContentArr = _mdContent.split('\n') // 换行切割成数组

pulgin4.png

我们要处理的就是这种数组

首先我们需要先循环这个数组

  mdArr.forEach(mdFragment=>{ // 找到数组里的文本片段
    console.log(mdFragment)
  })

后面我们就需要用正则去匹配文本了，我们的正则需要排除空的，然后要匹配前面东西，后面有空格的这种文本(如# )，大概的写法如下

 const reg_mask = /^(.+?)\s/;
 const f =  mdFragment.match(reg_mask)

我们可以看下用match匹配这个正则 打印出来的是不是我们想要的数据

puglin6.png 上面打印的这种数据确实是我们想要的数据

这里我们就需要对上面匹配完的数据进行处理了，首先我们要判断匹配完是否为空的情况，空的不考虑,然后先对#号开通的正则匹配完的数组作处理

const reg_sharp = /^\#/;// 匹配#号开头的
    
   if(f) { 
       if (reg_sharp.test(f[1])) {拿到了静好开头的数据 然后就是对数据作处理了
            //我们根据#号的个数就知道是h几了
             const tag = `h${f[1].length}`
             const input = f['input'] // 保存了一下input数据
              // 处理input的数据 我们想只拿正式文本 这里又用到正则了 正则换成空的
              const tagContent = input.replace(reg_mask,"")
             
       }
   
   }

咱们可以打印一下 我们处理过后的数据

puglin2.png 后面我们继续处理

avatar
文章
阅读
粉丝