diff --git a/AST抽象语法树/4.AST初次尝试/README.md b/AST抽象语法树/4.AST初次尝试/README.md new file mode 100644 index 0000000..53dff31 --- /dev/null +++ b/AST抽象语法树/4.AST初次尝试/README.md @@ -0,0 +1,116 @@ +# AST初次尝试 + +## 将JavaScript源代码转换成一棵AST树 + +**读取JavaScript源文件** + +`fs`是一个内置模块,用于处理文件系统操作。它提供了一组方法,使你能够读取、写入、修改和删除文件,以及执行其他与文件系统相关的操作。 + +```javascript +// 从文件获取js的源代码 fs 库 +const fs = require('fs'); + +// 源文件名默认为 encode.js,生成处理后的目标文件名默认为 decode_result.js +let encode_file = "./encode.js", decode_file = "./decode_result.js"; + +// node decode_obfuscator.js encode.js decode_result.js +// encode.js 混淆前js源代码的路径 +// decode_result.js 生成新js代码的路径 +if (process.argv.length > 2) { +encode_file = process.argv[2]; +} +if (process.argv.length > 3) { +decode_file = process.argv[3]; +} + +// 再保存到一个变量中,对这个变量进行处理即可: +let js_code = fs.readFileSync(encode_file, {encoding: "utf-8"}); +``` + +**打印ast树** + +`@babel/parser`解析器(parser)用于将源代码转换为抽象语法树(AST)。 + +```javascript +// 花括号 {} 表示解构赋值(Destructuring Assignment)语法,它用于从导入的模块中选择性地提取需要的属性或方法。 +const {parse} = require("@babel/parser"); +let ast = parse(js_code); + +// 打印ast树 +console.log(ast) +// 打印整个ast树 +console.log(JSON.stringify(ast,null,'\t')) +``` + +**效果** + +![debugger](./img/1.png) + +## 遍历各个节点的函数 + +`@babel/traverse`指的是遍历或遍历抽象语法树的过程,通过遍历 AST,可以分析程序的结构、执行静态分析、进行代码生成等操作。 + +```javascript +const traverse = require("@babel/traverse").default; +const visitor = +{ +// 在 Babel 的 AST 遍历过程中,enter 是一个回调函数,用于在进入每个节点时执行特定的操作 +enter(path) { +// 输出该节点的信息 +console.log(path); +}, +} + + +//调用插件,处理源代码 +traverse(ast, visitor); +``` +**效果** + +![debugger](./img/2.png) + +## 节点的类型判断及构造等操作 + +`@babel/types`是Babel工具链中的一个模块,它提供了一组用于创建、操作和检查AST节点的函数和工具。 + +这里就可以配合`@babel/traverse`遍历语法树,打印出`StringLiteral`类型的节点 + +```javascript +const types = require("@babel/types"); +const traverse = require("@babel/traverse").default; +const visitor = + { + // 在 Babel 的 AST 遍历过程中,enter 是一个回调函数,用于在进入每个节点时执行特定的操作 + enter(path) { + // 判断节点类型是否是StringLiteral + if (types.isStringLiteral(path)) { + console.log("node是StringLiteral"); + } else { + console.log("node不是StringLiteral"); + } + }, + } + +traverse(ast, visitor); +``` +**效果** + +![debugger](./img/3.png) + +## 将处理完毕的AST转换成JavaScript源代码 + +`@babel/generator`的default方法来将AST转换回可执行的JavaScript代码 + +```javascript +const generator = require("@babel/generator").default; +const generatedCode = generator(ast, {}); +console.log(generatedCode); + +// 写入文件 +let {code} = generator(ast); +fs.writeFile('decode.js', code, (err) => {}); +``` + +**效果** + +![debugger](./img/4.png) \ No newline at end of file diff --git a/AST抽象语法树/4.AST初次尝试/decode.js b/AST抽象语法树/4.AST初次尝试/decode.js new file mode 100644 index 0000000..47cb806 --- /dev/null +++ b/AST抽象语法树/4.AST初次尝试/decode.js @@ -0,0 +1,2 @@ +// 这是一个测试 +console.log('hello.ast'); \ No newline at end of file diff --git a/AST抽象语法树/4.AST初次尝试/encode.js b/AST抽象语法树/4.AST初次尝试/encode.js new file mode 100644 index 0000000..6ab4b10 --- /dev/null +++ b/AST抽象语法树/4.AST初次尝试/encode.js @@ -0,0 +1,2 @@ +// 这是一个测试 +console.log('hello.ast') \ No newline at end of file diff --git a/AST抽象语法树/4.AST初次尝试/img/1.png b/AST抽象语法树/4.AST初次尝试/img/1.png new file mode 100644 index 0000000..fe01569 Binary files /dev/null and b/AST抽象语法树/4.AST初次尝试/img/1.png differ diff --git a/AST抽象语法树/4.AST初次尝试/img/2.png b/AST抽象语法树/4.AST初次尝试/img/2.png new file mode 100644 index 0000000..1bb083a Binary files /dev/null and b/AST抽象语法树/4.AST初次尝试/img/2.png differ diff --git a/AST抽象语法树/4.AST初次尝试/img/3.png b/AST抽象语法树/4.AST初次尝试/img/3.png new file mode 100644 index 0000000..9b73a91 Binary files /dev/null and b/AST抽象语法树/4.AST初次尝试/img/3.png differ diff --git a/AST抽象语法树/4.AST初次尝试/img/4.png b/AST抽象语法树/4.AST初次尝试/img/4.png new file mode 100644 index 0000000..6f3872e Binary files /dev/null and b/AST抽象语法树/4.AST初次尝试/img/4.png differ