AST（抽象语法树）的学习第四讲——实战ast

1、删除空语句

源码
function add(a, b) {
    ;
    return a + b;
    ;
}

目的
源码中的空行“；”什么都没有声明，我们可以将它删除掉

分析
将源码在 在线解析网站上，发现两个空语句的type都是EmptyStatement，
那么我们就可以遍历源码中的所有EmptyStatement节点，将它删除掉

image.png

插件代码
const visitor = {
    EmptyStatement(path)
    {
        path.remove();
    }
}

执行结果
function add(a, b) {
  return a + b;
}

2、处理Unicode字符串

源码
var _0x350e = ['\x48\x65\x6c\x6c\x6f\x20\x57\x6f\x72\x6c\x64\x21', '\x38\x36\x54\x66\x76\x53\x44\x73', '\x32\x37\x31\x39\x38\x36\x32\x76\x65\x77\x71\x65\x56', '\x31\x7a\x62\x78\x4c\x6a\x46', '\x31\x36\x34\x37\x31\x30\x32\x45\x64\x79\x68\x66\x6a', '\x35\x33\x36\x37\x31\x39\x59\x69\x47\x42\x65\x6c', '\x36\x38\x32\x35\x38\x33\x5a\x71\x61\x43\x76\x76', '\x32\x30\x35\x30\x34\x32\x44\x5a\x42\x66\x6e\x75', '\x31\x35\x32\x34\x34\x35\x43\x65\x54\x51\x51\x6d', '\x34\x39\x31\x35\x6f\x52\x43\x4e\x4f\x6f', '\x6c\x6f\x67', '\x31\x54\x62\x71\x48\x45\x4e', '\x31\x31\x6f\x61\x57\x75\x79\x4e'];

目的
将源码中Unicode字符串转换成我们易读的字符串

分析
官网手册查询得知，NumericLiteral、StringLiteral类型的extra节点并非必需，这样在将其删除时，不会影响原节点。对照在线网站进行解析时，其value节点是可阅读的字符串，难以识别的字符串放在了extra节点里，所以直接进行删除即可。

image.png

官方插件地址:
https://babeljs.io/docs/en/babel-plugin-transform-literals

插件代码
const transform_literal = {
  NumericLiteral({node}) {
    if (node.extra && /^0[obx]/i.test(node.extra.raw)) {
      node.extra = undefined;
    }
  },
  StringLiteral({node}) 
  {
    if (node.extra && /\\[ux]/gi.test(node.extra.raw)) {
      node.extra = undefined;
    }
  },
}

执行结果
var _0x350e = ["Hello World!", "86TfvSDs", "2719862vewqeV", "1zbxLjF", "1647102Edyhfj", "536719YiGBel", "682583ZqaCvv", "205042DZBfnu", "152445CeTQQm", "4915oRCNOo", "log", "1TbqHEN", "11oaWuyN"];

传送门
AST（抽象语法树）的学习第一讲——认识ast在线解析网站
https://www.jianshu.com/p/6cccabe91228
AST（抽象语法树）的学习第二讲——ast分析代码步骤的拆解
https://www.jianshu.com/p/bef7fa8bf92a
AST（抽象语法树）的学习第三讲——ast分析常用节点及方法
https://www.jianshu.com/p/7ccdfac7cf79
参考内容：
Babel官方网址
https://babeljs.io/docs/en/
蔡老板星球地址
https://wx.zsxq.com/dweb2/index/group/init