关于Vue移动端ui组件lib-flexible的转换问题

​​​​​​在Vue的移动端中有很多ui组件，比如:vux、mint-ui、muse-ui等。但是直接引入到项目中会遇到lib-flexible的转换问题

这个问题的解决在网上暂时没找到好的 ，但是有一个可以解决就是改vux、mint-ui、muse-ui等的源码里面和px有关的代码;

闲暇时间用NodeJS写了一个一次性替换的方法

let fs = require('fs')
let str = process.argv[2]; //获取输入的参数
let data = '';
let newArr = []
let arr = ['node_modules/vux/src/components', 'node_modules/vux/src/styles']


function walk(dir) {
	var children = []
	fs.readdirSync(dir).forEach(function(filename) {
		var path = dir + "/" + filename
		var stat = fs.statSync(path)
		if (stat && stat.isDirectory()) {
			children = children.concat(walk(path))
		} else {
			children.push(path)
		}
	})

	return children.filter(item => {
		if (/.less|.vue/g.test(item)) {
			return true
		}
		return false
	})
}
arr.forEach(item => {
	newArr = newArr.concat(walk(item))
})

newArr.forEach(item => {
	data = fs.readFileSync(item, "utf8");
	newData = data.replace(/px;/g, 'px;/*no*/')
	fs.writeFileSync(item, '');
	fs.writeFileSync(item, newData);
})
// console.log(data);

新建文件main.js把代码放进去，放到当前项目和node_modules

在let arr = ['node_modules/vux/src/components', 'node_modules/vux/src/styles']这个里面的就是需要替换的目录

 

function walk(dir) {
	var children = []
	fs.readdirSync(dir).forEach(function(filename) {
		var path = dir + "/" + filename
		var stat = fs.statSync(path)
		if (stat && stat.isDirectory()) {
			children = children.concat(walk(path))
		} else {
			children.push(path)
		}
	})

	return children.filter(item => {
		if (/.less|.vue/g.test(item)) {
			return true
		}
		return false
	})
}

上面这个方法是递归查到符合规则的路径，可以自定义规则（/.less|.vue/g.test(item)）

最后一起替换掉就可以了  可以自定义规则

newArr.forEach(item => {
	data = fs.readFileSync(item, "utf8");
	newData = data.replace(/px;/g, 'px;/*no*/')
	fs.writeFileSync(item, '');
	fs.writeFileSync(item, newData);
})