需求

一个项目里面有大屏的，管理端的，大屏的需要转rem，管理端的不需要转。

手动替换还要自己去计算一次，vscode的全局替换又不能执行函数，所以只能写一个脚本来替换了

克隆或下载本仓库

jsx
/*
 * @Author: LiuXueChao
 * @Date: 2024-03-31 12:20:03
 * @LastEditors: your name
 * @LastEditTime: 2024-03-31 12:26:09
 * @Description: file content
 */
/** 
 * 将相应文件中的px转成rem，方便替换
 * 手动替换麻烦的很
 */
const { glob } = require('glob');
const path = require('path');
const fs = require('fs');
// 可根据实际情况修改为其他路径
const filesToReplace = 'src/views/demo/**/*.vue'
/** 
 * 遍历需要替换的文件
 */
glob(filesToReplace, {
    // glob('src/views/rem/**/*.vue', {
    ignore: ['node_modules/**', 'dist/**', 'biuld.js', '.git/**'],
    dot: true,
}).then((files) => {
    console.log('需要替换的文件数目： ' + files.length);
    console.log('替换开始');
    files.forEach((item) => {
        // 定义一个替换函数
        function replacePxWithRem (match, p1) {
            // 将捕获的数字 p1 转换为 rem，并保留三位小数
            var remValue = (1 / 16 * parseInt(p1)).toFixed(3);
            // 返回替换后的字符串
            return remValue + "rem";
        }
        const path_ = path.join(__dirname, '../', item);
        let content = fs.readFileSync(path_, "utf8");
        content = content.replace(/\b(\d+)px\b/g, replacePxWithRem);
        fs.writeFileSync(path_, content, "utf8");
        console.log('替换成功：' + item);
    });
    console.log('替换结束');
}).catch((e) => {
    console.log(e);
});

整体来说是个非常简单的脚本，用正则找到px然后进行替换，也可以装一些解析css的库来操作，我这样的就够用了

记录一下方便以后可能会替换其他的