babel是一个转译器。一般编译器 Compiler 是指高级语言到低级语言的转换工具,对于高级语言到高级语言的转换工具,被叫做转换编译器,简称转译器 (Transpiler)。

    三个阶段:

    • parse:通过 parser 把源码转成抽象语法树(AST)
    • transform:遍历 AST,调用各种 transform 插件对 AST 进行增删改
    • generate:把转换后的 AST 打印成目标代码,并生成 sourcemap

    babel 7 把这些功能的实现放到了不同的包里面:

    • @babel/parser 解析源码成 AST,对应 parse 阶段
    • @babel/traverse 遍历 AST 并调用 visitor 函数,对应 transform 阶段
    • @babel/generate 打印 AST,生成目标代码和 sorucemap,对应 generate 阶段

    其中,遍历过程中需要创建 AST,会用到:

    • @babel/types 创建、判断 AST
    • @babel/template 根据模块批量创建 AST

    上面是每一个阶段的功能, babel 整体功能的入口是在:

    • @babel/core 解析配置、应用 plugin、preset,整体整体编译流程

    插件和插件之间有一些公共函数,这些都是在:

    • @babel/helpers 用于转换 es next 代码需要的通过模板创建的 AST,比如 _typeof、_defineProperties 等
    • @babel/helper-xxx 其他的插件之间共享的用于操作 AST 的公共函数

    当然,除了编译期转换的时候会有公共函数以外,运行时也有,这部分是放在:

    • @babel/runtime 主要是包含 corejs、helpers、regenerator 这 3 部分:
      • helper: helper 函数的运行时版本(不是通过 AST 注入了,而是运行时引入代码)
      • corejs: es next 的 api 的实现,corejs 2 只支持静态方法,corejs 3 还支持实例方法
      • regenerator:async await 的实现,由 facebook 维护

    (babel 做语法转换是自己实现的 helper,但是做 polyfill 都不是自己实现的,而是借助了第三方的 corejsregenerator

    • @babel/cli babel 的命令行工具,支持通过 glob 字符串来编译多个文件

    用途:

    1. 转译 esnext、typescript、flow 等到目标环境支持的 js
    2. 一些特定用途的代码转换
    3. 代码的静态分析