bable工作流程

工作流程

关键内容

@babel/parser ES6+ ==> original AST

@babel/traverse 使用深度优先遍历，original AST ==> transformed AST

@babel/generator transformed AST ==> ES5/ES3

@babel/parser

    词法分析

        将ES6+转换为一些列tokens

        对于无效的文字或章节报告错误

    语法分析

        将一系列tokens转换为一个AST

        自动分号插入

        对于位置错误的tokens报告错误

    语义分析

        检查这个AST是否遵循ECMAScripts 所有静态的规则，即early error，如重复定义__proto__、在严格模式中使用with。

        对于重复定义的变量、块作用域符号、暴露未定义的变量等。

@babel/traverse

    声明式遍历

        使用深度优先遍历，enter()是默认入口，exit()是出口。

    支持动态的抽象语法树遍历

    scope 分析

        收集不同的scopes，如应用程序级别、函数级别、块级作用域级别

    收集声明

    收集引用

    实用程序

         nodes(AST)

            Srarch

            Introspection

            Evaluation

            Insertion

            Removal

            Replacment

         bindings(SCOPE)

            Validation

            Tracking

            Creation    

            Renaming

@babel/generator

    在必要的地方插入括号或缩进、注释等

@babel/core

    被@babel/cli babel-loader parcel等使用

    从babel.config.js等配置文件中合并配置

    收集预设和插件并将他们传递给@babel/traverse

@babel/types

    nodes 验证，用于AST node的验证和判断

    nodes 构建函数，在AST转换为JSON时，使得构建函数的参数名称与待生成的json 字段的value一一对应。
    
······