一、Babel 到底是什么?
一句话概括:Babel 是一个 JavaScript 编译器(转译器),它把高版本的 JS(或 TS、JSX)代码,转换成低版本环境能识别的等价 JS 代码。
注意一个关键区别:Babel 不是「翻译器」也不是「打包器」。它不关心模块怎么合并、资源怎么加载,它只做一件事——语法层面的等价变换。const变var、箭头函数变function、类变构造函数、JSX 变React.createElement,输出的代码在语义上必须和输入完全一致。
补充一点术语:业界常把「编译」分为两类。Transpile(转译)是同级语言之间的转换(JS → JS),Compile(编译)通常指跨语言(TS → JS、SCSS → CSS)。Babel 严格来说是 Transpiler,但因为走的是完整的编译器流水线,所以官方自称 Compiler。
二、核心流水线:parse → transform → generate
Babel 的工作流程可以拆成三个阶段,这也是几乎所有现代编译器(TypeScript、ESLint、Prettier、SWC)的通用模型:
源码字符串 ↓ ① parse(解析)