vuevite-style-pxtovm/src/index.js

vue vite 项目行内样式px转vw的js库

// 默认参数
let defaultsProp = {
  // unitToConvert: "px",
  viewportWidth: 750,  //UI设计稿的宽度
  unitPrecision: 2, // 转换后的精度，即小数点位数,行内样式只能小数点后4位
  viewportUnit: "vw",  //转换后的单位（包括字体）
  // fontViewportUnit: "vw",
  minPixelValue: 1,   //小于多少px的不转换
};
function toFixed(number, precision) {
  var multiplier = Math.pow(10, precision + 1),
    wholeNumber = Math.floor(number * multiplier);
  return (Math.round(wholeNumber / 10) * 10) / multiplier;
}

function createPxReplace(
  viewportSize,
  minPixelValue,
  unitPrecision,
  viewportUnit
) {
  return function ($0, $1) {
    if (!$1) return;
    var pixels = parseFloat($1);
    if (pixels <= minPixelValue) return;
    // console.log(toFixed((pixels / viewportSize) * 100, unitPrecision))
    return toFixed((pixels / viewportSize) * 100, unitPrecision) + viewportUnit;
  };
}
const templateReg = /<template>([\s\S]+)<\/template>/gi;
const pxGlobalReg = /(\d+)px/gi;

// 生成插件的工厂方法
const pluginGenerator = (customOptions) => {
  // 返回插件
  Object.assign(defaultsProp,customOptions)
  return {
    // 插件名称
    name: "stylePxToVw",

    // transform 钩子
    async transform(code, id) {
      let _source = "";
      if (/.vue$/.test(id)) {
        let _source = "";
        // 匹配template里的内容
        if (templateReg.test(code)) {
          _source = code.match(templateReg)[0];
        }
        // 匹配template里(数字加px)的内容,并根据设计稿宽度转换为vw
        if (pxGlobalReg.test(_source)) {
          let $_source = _source.replace(
            pxGlobalReg,
            createPxReplace(
              defaultsProp.viewportWidth,
              defaultsProp.minPixelValue,
              defaultsProp.unitPrecision,
              defaultsProp.viewportUnit
            )
          );

          code = code.replace(_source, $_source);
          // console.log(code);
        }
      }
      return { code };
    },
  };
};

export default pluginGenerator;