Babel它的原理,简单点说: Babel解析成AST,然后插件更改AST,最后由Babel输出代码
## 代码都可以拆解成抽象语法树,语法树解析网站:[https://astexplorer.net/](https://links.jianshu.com/go?to=https%3A%2F%2Fastexplorer.net%2F)
AST不依赖于具体的文法,不依赖于语言的细节,我们将源代码转化为AST后,可以对AST做很多的操作,包括一些你想不到的操作,这些操作实现了各种各样形形色色的功能,
简介:抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,这所以说是抽象的,是因为抽象语法树并不会表示出真实语法出现的每一个细节,比如说,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现。抽象语法树并不依赖于源语言的语法,也就是说语法分析阶段所采用的上下文无文文法,因为在写文法时,经常会对文法进行等价的转换(消除左递归,回溯,二义性等),这样会给文法分析引入一些多余的成分,对后续阶段造成不利影响,甚至会使合个阶段变得混乱。因些,很多编译器经常要独立地构造语法分析树,为前端,后端建立一个清晰的接口。
抽象语法树在很多领域有广泛的应用,比如浏览器,智能编辑器,编译器。
https://www.jianshu.com/p/f19101a08644?u_atoken=c47ab2ab-4f89-4200-9f7b-84d94193c5a8&u_asession=01qbwypRkl1vUqPkiOm4RD5XWkPS36QJ9uG3SqpxYiQeEZbo5PoUACsmeZwNxWJS_oX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K94BYOF1nB7qj0rT6U6SwOxVpSIj1gN2LaYxLWUpsc1qWBkFo3NEHBv0PZUm6pbxQU&u_asig=05bMIvyBb_Ao9RS7k9PNPI-5kxVVATg_7xDZ0zt_uzddiYj-W34MaHSM7aiT0wIdBVyOiZqfRjRd3SlZVeo_Cvt6avXnfQcKwDtMa6N8x3EO54IUlQht07pE-2Rs4NAc0A5771S_mqUPcStVdSnOGuAXQpyvFbx_rJ65lqDK3uB4j9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzbPNIqayTXr4GcfbWv-zL5bCEpyhsa_kNO7HgES7x1w9U4HK4hPy3A7RVNDWi_-Gxu3h9VXwMyh6PgyDIVSG1W85dzA6M4XXorffKT6b9qGEko3vS8lKQvxYTphZ3n_8OZd_Q6ur61ZO-MRdNb6ENcnyM94HJjIq6FA6fPr3MhYqmWspDxyAEEo4kbsryBKb9Q&u_aref=36PjU6QvWlivDv5RUlkh8TDpMik%3D
// index.js
var babel = require('@babel/core');
var t = require('@babel/types');
const visitor = {
BinaryExpression(path) {
const node = path.node;
let result;
// 判断表达式两边,是否都是数字
if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {
// 根据不同的操作符作运算
switch (node.operator) {
case "+":
result = node.left.value + node.right.value;
break
case "-":
result = node.left.value - node.right.value;
break;
case "*":
result = node.left.value * node.right.value;
break;
case "/":
result = node.left.value / node.right.value;
break;
case "**":
let i = node.right.value;
while (--i) {
result = result || node.left.value;
result = result * node.left.value;
}
break;
default:
}
}
// 如果上面的运算有结果的话
if (result !== undefined) {
// 把表达式节点替换成number字面量
path.replaceWith(t.numericLiteral(result));
}
}
};
module.exports = function (babel) {
return {
visitor
};
}
const babel = require("@babel/core");
const result = babel.transform("const result = 1 + 2;",{
plugins:[
require("./index")
]
});
console.log(result.code); // const result = 3;
https://juejin.cn/post/6844903566809759758
网友评论