利用preLoaders在编译时为vue组建自动增加id属性

在vue和react框架开发过程中‘id’属性基本不需要添加，但是前端UI自动测试需要ID属性确定操作元素

需求

开发期不添加id属性，在编译时对可操作控件[input,button,select等]增加id属性。

分析

在vue-Loader对vue代码进行编译前更改template定义对控件增加id属性

控件id命名规则

由于vue数据绑定特性，form表单项目都会存在v-module属性，可点击控件都会存在click属性从而控件id命名规则定义为控件类型_绑定项_序号

具体实现

项目属性

vue-cli 2.0脚手架创建
element-ui 库
vue-loader版本 13.3.0

项目build目录下创建‘preLoader-makeId.js’文件，主要功能分析模版接口为模版中可操作控件增加id。

module.exports = function(content) {
  let returnContent = content.replace(/\r\n/g, ' ')
  returnContent = returnContent.replace(/\r/g, ' ')
  returnContent = returnContent.replace(/\n/g, ' ')
  returnContent = returnContent.replace(/<\/el-/g, '\n</el-')
  returnContent = returnContent.replace(/<el-/g, '\n<el-')
  var regModule = /(model=\")([^\"]*)\"/g
  var regId = /(id=\")([^\"]*)\"/g
  var regBtn = /<(el-button)([^<>]*)>/g
  var regInput = /<(el-input)([^<>]*)>/g
  var regSele = /<(el-select)([^<>]*)>/g
  var regDate = /<(el-date-picker)([^<>]*)>/g
  var regInputNumber = /<(el-input-number)([^<>]*)>/g
  function makeId_input(index, item) {
    let id
    let res = regModule.exec(item)
    if (res && res.length > 0) {
      id = res[0]
        .replace('model="', '')
        .replace(/\"/g, '')
        .replace(/\./g, '_')
    }
    return id || index
  }
  function makeId_btn(index, item) {
    let id
    let clickAllArr = item.split(/click=/g)
    let subClick = ''
    let subClickArr = []
    if (clickAllArr.length > 1) {
      subClick = clickAllArr[1].substring(1, clickAllArr[1].length)
      subClickArr = subClick.split(/"/g)
      if (subClickArr.length > 1) {
        id = subClickArr[0]
          .split(/\=/g)[0]
          .split(/\(\"/g)[0]
          .split(/\(\'/g)[0]
          .split(/\(/g)[0]
      } else {
        id = index
      }
    } else {
      id = index
    }
    return id || index
  }
  let contentArr = returnContent.split('\n')
  let resultArr = contentArr.map((item, index) => {
    let id
    if (!regId.test(item)) {
      // 输入框 - 数字
      if (regInputNumber.test(item)) {
        item =
          '<el-input-number' +
          ' id="input_number_' +
          makeId_input(index, item) +
          '"' +
          item.substring('<el-input-number'.length, item.length) +
          ' '
      } else if (regInput.test(item)) {
        // 输入框
        item =
          '<el-input' +
          ' id="input_' +
          makeId_input(index, item) +
          '"' +
          item.substring('<el-input'.length, item.length) +
          ' '
      }
      if (regSele.test(item)) {
        // 选择框
        item =
          '<el-select' +
          ' id="select_' +
          makeId_input(index, item) +
          '"' +
          item.substring('<el-select'.length, item.length) +
          ' '
      }
      if (regDate.test(item)) {
        // 日期选择
        item =
          '<el-date-picker' +
          ' id="date_' +
          makeId_input(index, item) +
          '"' +
          item.substring('<el-date-picker'.length, item.length) +
          ' '
      }
      if (regBtn.test(item)) {
        // 按钮
        item =
          '<el-button' +
          ' id="btn_' +
          makeId_btn(index, item) +
          '"' +
          item.substring('<el-button'.length, item.length) +
          ' '
      }
    }

    return item
  })
  return resultArr.join('\n')
}

修改build目录下vue-loader.conf.js增加

 preLoaders: {
    html: path.resolve(__dirname, '../build/preLoader-makeId')
  }

此时已经完成id属性增加，运行npm run dev 查询页面源码发现id属性已经存在

本篇文章由一文多发平台ArtiPub自动发布