前端项目一键转换rem脚本思路

前端项目开发中，按照设计图去写样式时，需要将px转换成rem，可以通过 px2rem loader的方式，也可以通过vscode的插件设置按键去转换。

但由于项目要求，不允许使用loader(为保持原代码或其他项目中开发人员的习惯)，而又已经开发的项目，不想去一个个修改，可教你的男朋友编写一个js脚本来进行处理

在项目中添加一个px2rem.js脚本

设置默认数据

const fs = require("fs");
let path = "./src";
let baseSize = 37.5;

path为需要转换的目录，baseSize为转换的基准值

找到所有的vue/jsx/css/sass/scss文件

搜索path里面的目录，寻找所有的vue/jsx/css/sass/scss文件

function getAllComponents(path) {
    let vues = [];
    function getChildren(path) {
        let children = fs.readdirSync(path)
        children.map(_ => {
            let childPath = path + '/' + _;
            if (!fs.lstatSync(childPath).isDirectory()) {
                if (childPath.slice(childPath.lastIndexOf('.') + 1) === 'vue') {
                    vues.push(childPath)
                }
            } else {
                getChildren(childPath)
            }
        })
    }
    getChildren(path)
    return vues
}

let vues = getAllComponents(path);

1. 用一个数组存放所有vue/jsx文件路径的数组里
2. 搜索目录中的子目录，如果是目录，就递归处理，如果是vue/jsx文件，就将其push进存放所有vue/jsx文件路径的数组里（需注意此处的异步处理顺序）
3. 返回一个有全部vue/jsx文件路径的数组

读取所有vue/jsx/css/sass/scss文件，px替换为rem，再写入

vues.forEach(_ => {
    let vue = fs.readFileSync(_, 'utf8')
    let rep = /\d*\.?\d*px/g;
    if (vue.match(rep)) {
        let res = vue.replace(rep, (a) => {
            return (+a.slice(0, -2) / baseSize) + 'rem'
        })
        fs.writeFileSync(_, res)
    }
})

readfile 需要以utf8形式，正则匹配时应匹配上小数

启动脚本

node px2rem

启动该脚本即可完成对全部px转换成rem，如果是rem转成px