抽象语法树(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端能用的文件。
最小化代码(也可以下载本文末尾附件,安装依赖后执行node app.js)
/** * 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()
相关推荐
CSS代码属性大全,并不是文档,是自己总结的常用属性,看起来方便些,希望对你们有帮助
ast解混淆工具的第三版,前两版在我的github上,第三版优化内容在使用了多线程,但是处理过大的js时还是会有卡住的情况,在第二版的基础上优化了一下ast代码,添加了部分常用工具 v0.3目前未解决: 应用内说明文档...
通过AST修改启用python源代码重构。 示例用例: 通过重写import语句,方便移动或重命名python模块。 重构代码以强制执行某种样式,例如对函数定义进行重新排序。 安全地将代码从一个API迁移到另一个API。 设计...
AST浏览器 将代码粘贴或拖放到编辑器中,并在上检查生成的AST。... 复制AST或将包含AST的文件到窗口中将解析AST并使用更新代码。 否则,文本编辑器的内容将替换为文件的内容(即,您可以拖放JS文件)。 在多个
css-bouncer 将规则作为插件的 CSS Linter。 CSS Bouncer 是一个运行 CSS 规则的工具。 一些插件 CSS Bouncer 本身是相当无用的。... 请在 npm 中使用cssb-作为公共 CSS Bouncer 规则的前缀,以帮助查找规则。
该方法根据多种语言的文法文件,用语法分析工具生成对应的抽象语法树(AST ),利用计算生物学中序列匹配算法进行程序相似度计算,提取程序相似部分的AST特征,生成空间向量,通过聚类分析找出“抄袭团伙”.实验结果表明,该...
一个Python调试器,可以在函数调用中记录表达式的值,并让您在函数退出后轻松查看它们。
如何通过ASTNode修改Java源码:遍历项目解析为ASTnode节点,修改ASTNode节点,利用ASTNode节点创建新的Java 资源目标代码,删除原有的拟修改代码。
AST2500芯片配套的iBMC配置使用手册,详细地介绍了通过iBMC的浏览器页面管理功能管理服务器上FRU设备和服务器的运行管理和状态监控,是难得的熟悉AST2500带外管理工作方式的使用说明手册,值得下载学习。
ast-hook用于js逆向根据参数值快速定位到生成加密参数位置
针对目前代码抄袭检测方面的研究大多是基于程序源码层面进行相似度比较,不需要对代码进行语法分析,由于忽略程序语法语义,对稍加结构修改的抄袭行为无法有效检测的现状,提出一种基于AST的代码抄袭检测方法。...
大量减少代码量-如果您需要使用AST对代码进行升级,改造,分析,快用gogoAST帮你扩展繁琐冗余的代码,专注于你的核心逻辑。不需要遍历,像剥洋葱一样一层一层的对比,操作,构造ast异步。降低理解成本-甚至不需要...
一个Ruby codemod CLI,可使用AST(抽象语法树)和gem来转换源代码。 它通常用于Ruby代码库,例如RAILS应用程序和其他内容。 安装 $ gem install codeshift 用法 此工具需要一个transform.rb文件,该文件包含要应用...
eclipse 使用 AST 简单解析抽象语语法树所需要的jar包
Eclipse JDT AST使用方法,word格式的。Eclipse JDT是eclipse中开发Java程序的一套工具,包括editor,语法高亮等等功能,而其中的AST更是十分优秀的解析Java源代码的工具
AST2400 iBMC 配置手册!分享一下,可以学习参考!!
WIN64AST_110_BETA1.zip
eclipse cdt 解析C++ AST
压缩包内为ast2500开发手册文档,主要介绍MDS工具的使用,方便用户进行ast2500应用开发。