webpack系列之：babel的原理

大家好我是林三心，因为之前校招面试被问过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转化的过程

1.parse：第一步是babel使用babylon将原始代码转换为抽象语法树
2.transform：第二步是babel通过babel-traverse对前面的抽象语法树进行遍历修改并获得新的抽象语法树
3.generator：第三步是babel使用babel-generator将抽象语法树转换为代码
备注：这三个操作通过babel-core合成一个对外的api供外界使用

加油！！！