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供外界使用

加油！！！