美文网首页
vue项目迁移rem转px

vue项目迁移rem转px

作者: DeadMoon | 来源:发表于2021-10-18 17:39 被阅读0次

    故事背景:
    vue H5老项目通过 js文件监听body变化动态设置跟字体大小, 新项目通过npm插件 amfe-flexible && postcss-pxtorem 做的适配, 新项目开发一部分后需要将老项目部分模块迁移进入老项目发现出现布局错乱现象, 分析原因是样式单位导致的(老项目 rem, 新项目 px),解决方法只能是替换老项目像素单位, 故写了下面 node 脚本.

    ① node ${此文件名}
    ② 输入需要转化的文件或文件夹相对根目录绝对路劲

    const fs = require('fs')
    const readline = require('readline')
    const path = require('path')
    
    const isFile = stats => stats.isFile()
    const isDir = stats => stats.isDirectory()
    const accMul = (arg1, arg2) => {
      var m = 0, s1 = arg1.toString(), s2 = arg2.toString()
      try {
        m += s1.split('.')[1].length
      } catch (e) {}
      try {
        m += s2.split('.')[1].length
      } catch (e) {}
      return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
    }
    
    const scan = readline.createInterface({
      input: process.stdin,
      output: process.stdout
    })
    
    const getTargetContent = content => {
      return content.replace(/(\<style[\S\s]*?\>)([\S\s]*?)(\<\/style\>)/g, (_, $1, $2, $3) => {
        return `${$1}${$2.replace(/((-?\.?\d+)(\.\d+)?)rem/g, (_, str) => {
          return `${accMul(str, 50)}px`
        })}${$3}`
      })
    }
    
    const remToPx = path => {
      const content = fs.readFileSync(path, 'utf-8')
      const str = getTargetContent(content)
      fs.writeFileSync(path, str)
    }
    
    const fileTransform = (filePath) => {
      const stat = fs.statSync(filePath)
      if (isFile(stat)) {
        remToPx(filePath)
        return
      }
      //根据文件路径读取文件,返回文件列表
      fs.readdir(`${__dirname}${filePath}`, (err, files) => {
        if (err) return
        //遍历读取到的文件列表
        files.forEach(filename => {
          //获取当前文件的绝对路径
          const filedir = path.join(filePath, filename)
          //根据文件路径获取文件信息,返回一个fs.Stats对象
          fs.stat(filedir, (eror, stats) => {
            if (eror) {
              console.warn('获取文件stats失败')
              return
            }
            if (isFile(stats)) {
              remToPx(`${filePath}/${filename}`)
            }
            if (isDir(stats)) {
              fileTransform(filedir)
            }
          })
        })
      })
    }
    
    scan.question('请输入需要转化的文件夹或文件(必须相对项目根路径):', filePath => {
      const path = `${filePath.startsWith('/') ? filePath : `/${filePath}`}`
      fileTransform(path)
      scan.close()
    })
    

    相关文章

      网友评论

          本文标题:vue项目迁移rem转px

          本文链接:https://www.haomeiwen.com/subject/mmpnoltx.html