抽象语法树(AST)相信很多从事后端开发的同学都已经很了解了,得益于nodejs这两年的发展,很多前端同学也对AST有所研究,像近两年出现的小程序开发框架wepy mpvue等确实解决了不少前端开发中的实际问题,像mpvue这种框架的原理是什么,其中比较核心的功能就是使用AST来完成js,html,css的编译,趁着年初不忙,对去年一个项目中AST的应用做下简单分享,高手勿喷哈!
先说下需求背景,已经有一些小程序页面,现在产品要求能在pc管理后台可视化预览这些页面,这里只介绍其中一个简单的功能点就是css部分的重构,来帮助大家入门。
小程序使用mpvue开发,pc后台也是使用vue开发,这样html模板大部分可以复用,只需替换一些组件,css部分小程序使用sass, 里面的尺寸单位都是750rpx,但在pc上预览的时候只有430px,最早使用sass中的一些函数来解决此问题,但发现太费时间,效率不高,最后决定用使用node-sass先将scss转换css文件, 再使用css做ast转换的常用库css-tree把css代码解析成json树,调用csstree.walk对想要重构的尺寸,单位进行修改,修改完后调用csstree.generate再生成css代码,最后部分做成一个命令行工具,对小程序写好的scss文件直接转换为pc端能用的文件。
最小化代码
/**
* Created by liujinghao on 2018/12/5.
* 基于ast 转换mpvue项目中的scss文件,使其兼容在pc上显示
*/
const sass = require('node-sass')
const fs= require('fs')
const csstree = require('css-tree');
let convertCss= function (scssFilePath) {
return new Promise((resolve,reject) => {
sass.render({
file: scssFilePath
},
function (err, result) {
if(err){
reject(err)
}else {
let css = result.css.toString()
resolve(css)
fs.writeFile('out.css', css, function () {
console.log('scss转换为css后写入到out.css')
})
}
})
})
}
let createCode = async function () {
let cssString = await convertCss('diy.scss')
let ast = csstree.parse(cssString)
let copy = csstree.clone(ast);
fs.writeFile('ast.txt', JSON.stringify(ast), function () {
console.log('ast分析代码写入到ast.txt')
})
csstree.walk(copy, function (node, item, list) {
//console.log(node.type,'____', node.value)
if (node.type === 'Dimension') {
node.value = (node.value / 1.745).toFixed(3)
console.log(node)
}
});
let transCode = csstree.generate(copy)+''
transCode = transCode.replace(/rpx/g,'px')
// console.log(transCode)
fs.writeFile('transCode.css', transCode, function () {
console.log('最终代码写入到transCode.css')
})
}
createCode()