webpack 自定义插件 模版注释替换和字符串处理

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

接webpack 开发自定义插件对文本进行h标签和无序列表的方法描述文章我们继续对其进行处理， 在我处理有序列表之前，我们要对每个标签添加随机，以保证每个标签都是独一无二的，看一下咱们的随机数方法

function randomNum() {
    // 时间戳加随机数
    return new Date().getTime()+parseInt(Math.random()*100000)
}

有序列表的代码大家看下

     // 判断有序列表
     if (reg_number.test(f[1])) {
        let input = f['input'] // 保存数据
        const tagContent = input.replace(reg_crossbar,"")
        const tag = 'li'
        if (reg_number.test(_lastMark)) {
            poll['ol-'+_key].tags = [...poll['ol-'+_key].tags,`<${tag}>${tagContent}</${tag}>`]
        } else {
            _key = randomNum() // 添加了随机数
            _lastMark = f[1]
            poll['ol-'+_key] = {
                type: "warper",
                tags: [`<${tag}>${tagContent}</${tag}>`]
            }
        }
     }

其实和之前两个处理的差不多。 咱们来看一下加了随机数的数据

下面就是最重要的一步，就是依据我们处理过的数据，让他变成html了看下代码

function compilerHtml(_mdArr) {
    const htmlp = createTree(_mdArr);// 我们拿到了处理好的数据
    // 新建一个空字符串
    let  htmlStr = '';  
    // 当前的value值
    let item = ''
    // 循环对象拿到里面key和value做判断
    for(let k in htmlp) {
        item = htmlp[k]
        if (item.type=='single') { // 这个判断是我们之前就定义好的
            item.tags.forEach(tag=>{
                htmlStr+=tag
            })
        } else if (item.type=="warper") { // 这个比较复杂 他是有父元素的
          let _list = `<${k.split('-')[0]}>` // 需要根据k的值来新建标签
          item.tags.forEach(tag=>{
            _list+=tag
          })
          _list+=`</${k.split('-')[0]}>`
          htmlStr+=_list
        }
    }
    console.log(htmlStr)
    return htmlStr
}

打印出来的就是html标签字符串，主体大的架构我们之前已经搭好了，我们可以把标签处理出来，就可以直接用了， 这是htmlStr打印出来的数据

我们做这个其实是挺简单，但是webpack对模版处理的中心思想，大概就是这些，只是有些模版处理的业务逻辑，比我们复杂，而且处理这个我们应该会用到大量正则表达式，我们做的这个小插件用的不多，复杂逻辑会用到。我会把程序的部分截图发上来，如果大家想要源码可以留言谢谢 这是compiler.js部分截图，

index.js截图

完结撒花