AST基础知识:环境的搭建与babel库的安装

男娘i 2022-11-16 16:34 487阅读 0赞

本文环境为win10系统，兼容各win系统(只需区分32位及64位操作系统)，linux环境请自行下载测试。

## 一.安装nodejs ##

安装地址:

https://nodejs.org/zh-cn/download/

打开后，下载长期支持版，然后傻瓜式安装即可。

![3c68ecce7569839813b54fed921d8cc1.png][]

安装完成后，自动加入了环境变量，在cmd模式下输入 node，查看版本:

![a646690c9e98c499d3ac3faeaa38b9c4.png][]

出现这个，即表示安装成功。

## 二.安装babel库 ##

1.什么是Babel？

根据官网介绍,它是一个JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

对爬虫工程师来说，没有必要那么深入的去了解Babel库的边边角角。只需要去学习**如何将复杂难以阅读的代码 改造 成简单易懂的代码**，即通过js代码改造js代码。

2.如何安装Babel库？

经过多次多个win系统的采坑后，这里 **强烈建议不要全局安装，直接安装到某个目录下即可**，安装命令:

npm install @babel/core --save-dev

安装成功示意图:

![c01baf15dc1dcf8f7ba15226e6269d4c.png][]

我们可以 导入某个库，看看是否可以正常调用:

![1f028371b1bf47b6597fc4a9798598d7.png][]

在导入 @babel/parser 库后没有报错，那说明可以正常使用babel库了。

## 三.学习babel库 ##

1.  JavaScript源代码转AST结构，@babel/parser，代码路径:
    
        node_modules\@babel\parser\lib
    
    在 node\_modules\\@babel\\parser\\bin\\babel-parser.js 该文件中有一段打印AST的代码，如下:
    
        var filename = process.argv[2];
        if (!filename) {
          console.error("no filename specified");
        } else {
          var file = fs.readFileSync(filename, "utf8");
          var ast = parser.parse(file);
        
        
          console.log(JSON.stringify(ast, null, "  "));
        }
2.  AST结构转JavaScript源代码，@babel/generator，代码路径:
    
        node_modules\@babel\generator\lib\generators
3.  遍历 AST结构 的相关api，@babel/traverse，代码路径:
    
        node_modules\@babel\traverse\lib
    
    该路径下的 path 和scope 子文件夹是学习的重点。
4.  构建新的节点，@babel/types，代码路径:
    
        node_modules\@babel\types\lib

解混淆能用到的api，基本就在这四个目录里面了，建议直接从源代码开始学习。

当然也有很多是不需要弄懂的代码，就看自己的时间了。

说明:本文是 [利用AST解混淆先导知识:概念相关][AST] 这篇文章的简化版，旨在给星友们一个更愉悦的阅读方式。请勿乱喷。

欢迎关注本人微信公众号，谢谢！

[3c68ecce7569839813b54fed921d8cc1.png]: /images/20221022/444237f0bd004a9284ecd4954304df17.png
[a646690c9e98c499d3ac3faeaa38b9c4.png]: /images/20221022/97ee8f88a73e473196f35249eec5fe87.png
[c01baf15dc1dcf8f7ba15226e6269d4c.png]: /images/20221022/5c84d0c3823d43b2ba2c3addbbaab140.png
[1f028371b1bf47b6597fc4a9798598d7.png]: /images/20221022/d43167996c244847affde080e3d0f4a2.png
[AST]: http://mp.weixin.qq.com/s?__biz=MzAwNTY1OTg0MQ%3D%3D&chksm=83237a43b454f355fb19675c6e614839146e122fc083d858867c4ec3a20553b3952b230885f3&idx=1&mid=2647562221&scene=21&sn=564bbcf2160d5fe6416e8a4d28b797c3#wechat_redirect