🔤 Babel
一句话定性
Babel 是整个前端生态敢于”激进使用未来语法”的安全网。它把 ES6+/JSX/TS 这些老浏览器不认的代码,通过 AST 转换”翻译”成老浏览器能跑的 ES5。它让语言进化和浏览器兼容解耦了。代价是:它用 JS 写,慢——后来被 esbuild(Go)/SWC(Rust)在速度上 10–100 倍超越。
一、它是什么 & 出现的时代
Babel(原名 6to5,2014,作者 Sebastian McKenzie)是一个 JavaScript 转译器(transpiler)。
“6to5”这个原名一语道破初衷:把 ES6 转成 ES5。后来支持的语法越来越多(JSX、TypeScript、各种提案阶段的语法),才改名 Babel。它诞生在 ES6-ES2015 发布前夕——新语法已经定稿,但浏览器还没跟上。
二、为什么会出现(解决上一代什么痛点)
想用新语法,但浏览器不认
- 语言进化 vs 浏览器更新,速度严重不匹配:ES6-ES2015 带来
class、箭头函数、let/const、解构、模板字符串……但用户的浏览器还停留在只懂 ES5。- JSX 不是合法 JS:React 的 JSX 浏览器根本不认识,必须先转成
React.createElement(...)。- 不能等浏览器普及:如果非要等到所有用户都升级浏览器才用新语法,前端永远落后语言好几年。
Babel 的洞察(第一性原理):浏览器兼容是约束,但语言进化不该被它绑架。在”写代码”和”跑代码”之间插一层翻译,就能把两者解耦。
三、核心机制 & 为什么流行
核心是 AST 转换,分三步
源码(ES6+/JSX)
│ ① Parse(解析)
▼
AST(抽象语法树)── 把代码变成可编程操作的树结构
│ ② Transform(转换)── 各种 plugin/preset 遍历 AST,改写节点
▼
新 AST(等价但用 ES5 语法表达)
│ ③ Generate(生成)
▼
目标码(ES5)+ source map
为什么是 AST,不是字符串替换? 因为代码有结构和作用域,简单的查找替换会出错(比如字符串里的 => 不该被当箭头函数)。在 AST 层操作才安全、才能处理复杂语义。
关键机制:
- Plugin:每个语法转换是一个 plugin(如
@babel/plugin-transform-arrow-functions)。 - Preset:plugin 的集合(如
@babel/preset-env、@babel/preset-react)。 @babel/preset-env+ browserslist:你声明”要支持哪些浏览器”,它自动决定转译哪些语法、注入哪些 polyfill。这是杀手级特性。
为什么流行:它让生态可以立刻用上最新语法,而不必等浏览器。React(JSX)、所有用 ES6+ 的项目都依赖它。它和 Webpack 的 babel-loader 组合成了一代人的标配。
四、带来的新问题 / 副作用
安全网很重,而且慢
- 慢:AST 解析 + 转换 + 生成,全用 JS 实现,是构建流程里最耗时的环节之一。大项目里 babel-loader 经常是构建瓶颈。
- polyfill 膨胀:
core-js等 polyfill 会显著增大 bundle 体积。- 配置复杂:preset/plugin 的组合、
targets的设定,理解成本不低。- 过度转译:目标浏览器其实已支持的语法被无谓转译,产物更大更慢(现代浏览器下尤其浪费)。
五、为什么会衰落 / 现状
Babel 没有消失,但在”速度”这个维度上被全面挑战。
根因:Babel 用 JS 写,性能有天花板。 当构建速度成为 2018-2023 工程化时代 的核心痛点,用编译型语言重写转译器成了必然:
| 工具 | 语言 | 相对 Babel 速度 |
|---|---|---|
| Babel | JavaScript | 1x(基准) |
| esbuild | Go | ~10–100x |
| SWC | Rust | ~10–70x |
- esbuild(Go):Vite 用它做 dev 转译和依赖预构建。
- SWC(Rust):Next.js 用它替换 Babel,给编译提速。
现状(2026):
- 速度敏感的场景(dev 转译、生产压缩)几乎都换成了 esbuild/SWC。
- Babel 仍不可替代的地方:庞大的 plugin 生态、对实验性/提案阶段语法的支持、宏(macro)等高级 AST 操作——这些 esbuild/SWC 还没完全覆盖。
- 趋势:默认用快的(SWC/esbuild),需要 Babel 的特殊能力时才回退到它。
六、对后续技术的影响(因果链)
[[ES6-ES2015]] 定稿,但浏览器没跟上
│
▼
Babel(原 6to5):AST 转换,把未来语法翻译成 ES5
│ ① 让生态敢于激进使用新语法(语言进化与兼容解耦)
│ ② 让 JSX 成为可能 ──► 助推 [[React]]
│ ③ preset-env + browserslist ──► 按需转译
│ ④ 但用 JS 写 ──► 慢,成为构建瓶颈
│
▼
"构建慢"成为工程化时代核心痛点
│
├──► esbuild(Go,~10–100x)──► [[Vite]] 的 dev 转译 / 预构建
│
└──► SWC(Rust,~10–70x)──► Next.js 替换 Babel
│
▼
Rust/Go 工具链潮流(延续到 [[Turbopack]]、Rspack、Oxc)
│
▼
Babel 退守"生态深度 + 实验性语法"的护城河
历史地位
Babel 是前端”语言进化”的发动机。没有它,JSX 不会成功,ES6+ 的普及会慢好几年。它把”写代码用什么语法”和”代码在哪跑”解耦,这是一个深远的架构思想。它在速度上的失守,恰恰证明了 Rust/Go 重写工具链这股潮流的必然性。
🔗 相关:前端工程化演进史 | ES6-ES2015 | TypeScript | Webpack | Vite | Turbopack | React | 2013-2018 SPA时代