大家好我是林三心,因为之前校招面试被问过babel的原理,那我今天就写篇文章简单讲讲babel的原理吧。
抽象语法树:在讲babel原理之前先说说什么事抽象语法树( 即AST ),也就是计算机理解我们代码的方式
下面举个例子
console.log("hello")
复制代码
则会得到这样一个树形结构(已简化):
{
"type": "Program", // 程序根节点
"body": [
{
"type": "ExpressionStatement", // 一个语句节点
"expression": {
"type": "CallExpression", // 一个函数调用表达式节点
"callee": {
"type": "MemberExpression", // 表达式
"object": {
"type": "Identifier",
"name": "console"
},
"property": {
"type": "Identifier",
"name": "log"
},
"computed": false
},
"arguments": [
{
"type": "StringLiteral",
"extra": {
"rawValue": "hello",
"raw": "\"hello\""
},
"value": "hello"
}
]
}
}
],
"directives": []
}
复制代码
babel转化的过程
2.transform:第二步是babel通过babel-traverse对前面的抽象语法树进行遍历修改并获得新的抽象语法树
3.generator:第三步是babel使用babel-generator将抽象语法树转换为代码
备注:这三个操作通过babel-core合成一个对外的api供外界使用