19.重学webpack——原理之AST抽象语法树
1-15节主要讲webpack的使⽤，当然，建议结合⼀起学习。
从16节开始，专攻webpack原理，只有深⼊原理，才能学到webpack设计的精髓，从⽽将技术点运⽤到实际项⽬中。
可以点击上⽅专栏订阅哦。
以下是本节正⽂：
ast语法树(会有专门章节详细介绍AST，本节只是了解⼤概过程)在我们⼯作中经常会⽤到，⽐如以下场景：
代码语法的检查、代码风格的检查、代码的格式化、代码的⾼亮、代码错误提⽰、代码⾃动补全等等如 JSLint、JSHint 对代码错误或风格的检查，发现⼀些潜在的错误
IDE 的错误提⽰、格式化、⾼亮、⾃动补全等等
代码混淆压缩
UglifyJS2 等
优化变更代码，改变代码结构使达到想要的结构
webpack打包流程 面试代码打包⼯具 webpack、rollup 等等
CommonJS、AMD、CMD、UMD 等代码规范之间的转化
CoffeeScript、TypeScript、JSX 等转化为原⽣ Javascript
1.⼀般需要ast转换的⼯作流程：
⽼代码=>⽼语法树=>遍历语法树上的各个节点=>对语法树进⾏修改转换=>新的语法树=>根据新的语法树重新⽣成源代码举例：es6 => es语法树 => 遍历箭头函数节点 => 把箭头函数转成普通函数 => 重新⽣成es5代码
2.AST抽象语法树解析步骤：
如上图前半部分所⽰，具体步骤为：
1. 对源代码进⾏词法分析
将语句切成⼀个个的单词，不关⼼语法含义，这些单词构成了token数组，被称为token留2. 语法分析
根据token进⾏语法分析，⽣成语法树
3.实战举例
将function ast(){}转成function newAST(){}
1. 安装依赖
npm i esprima estraverse -S
1. esprima：解析器，将源代码转换成抽象语法树
2. estraverse：是⼀个⽅法，⽤来遍历抽象语法树
npm i escodegen -D
1. escodegen：将转换后的语法树，重新⽣成源码
2. 代码
代码步骤分为：
1. 将源码转成AST语法树
2. 遍历语法树，修改语法树节点
3. 将新的语法树，转成新的源码
// 把源代码转成AST语法树
let esprima =require('esprima');
// 遍历语法树
let estraverse =require("estraverse");
/
/ 把转换后的语法树，重新⽣成源码
let escodegen =require('escodegen');
// ⼀般⼯作流都是：⽼代码=>⽼语法树=>遍历语法树上的各个节点=>对语法树进⾏修改转换=>新的语法树=>根据新的语法树重新⽣成源代码// ⽐如：es6 => es语法树 => 遍历箭头函数节点 => 把箭头函数转成普通函数 => 重新⽣成es5代码
let sourceCode =`function ast(){}`;
let astTree = esprima.parseModule(sourceCode);
console.log(astTree);
console.log("在线解析AST，可以登录⽹址：astexplorer")
let indent =0;// 缩进，计算缩进的空格数，打印的时候看起来更加清晰点
const padding=()=>" ".repeat(indent);// 字符串缩进，打印的时候看起来更加清晰点
// estraverse遍历语法树，⽤的是深度优先遍历
enter(node){
console.log(padding()+ pe +'进⼊');
pe ==='FunctionDeclaration'){
node.id.name ='newAST';// 这是进⾏语法转换，在这⾥相当于改了函数的名称
}
indent +=2;
},
leave(node){
indent -=2;
console.log(padding()+ pe +'离开')
}
})
// escodegen重新⽣成源代码
let result = ate(astTree);
console.log(result);// function newAST() {}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论