当前位置：首页 > news >正文

身为大厂前端的你，不能不知道Babel + Polyfill！

news 2026/3/26 18:47:03

〇、Babel 概述

Babel 的工作原理 = “把代码变树 → 改树 → 再变回代码”。

也就是三个阶段：

Parse（解析）：ESNext（ES 新语法） → AST 语法树
Transform（转换）：插件修改 AST
Generate（生成）：AST → 旧 JS 代码（浏览器都可以识别的代码）

Babel 是一个“代码转换工具”，核心就是围绕 AST（抽象语法树）做代码替换，替换成兼容各浏览器的代码旧语法。

一、Babel 的编译三阶段（Pipeline）

Parsing（解析成 AST）

作用：把 JS 源码转成 AST（抽象语法树）

示例代码：

const sum = (a, b) => a + b;

转换成的 AST 类似这样的树状结构：

Program└─ VariableDeclaration└─ VariableDeclarator├─ Identifier(sum)└─ ArrowFunctionExpression├─ Identifier(a)├─ Identifier(b)└─ BinaryExpression(+)

解析流程满足：

babylon / @babel/parser → 把源码变成 AST
AST 格式遵循 ESTree 标准

Transform（通过插件修改 AST）

Babel 插件会遍历 AST，并进行“节点替换”。

比如将箭头函数转成 ES5：

输入（AST 节点：ArrowFunctionExpression）：

const sum = (a, b) => a + b;

输出（被插件改过的 AST）：

const sum = function(a, b) {return a + b;
};

这个过程主要由 Babel 的“Transform 插件”（如 @babel/plugin-transform-arrow-functions）完成。

插件在遍历 AST 时，会提供“Visitor 函数”，例如：

Visitor = {ArrowFunctionExpression(path) {// 发现箭头函数 → 替换成普通函数定义}
}

所有 Babel 插件本质上都是：AST 节点识别 + 替换。

我们最常见插件有：

处理箭头函数
处理类 class
处理 async/await

Generate（生成兼容代码）

最后阶段：把变过的 AST 再转成 JS 字符串。

通过：

@babel/generator

输出：

"use strict";var sum = function (a, b) {return a + b;
};

至此，编译完成。

二、Babel 与 Webpack 的协作很简单

Webpack 使用 babel 其实只需要 babel-loader ，然后为不同的转换提供不同的 babel 插件配置，整个过程都会在 babel-loader 内部完成：

把文件交给 Babel 处理，拿到 Babel 输出的 JS，再丢给 webpack 的后续 loader / bundler。

流程如下：

source.js↓ (webpack 调用 babel-loader)
Babel1. parse2. transform (plugins/presets)3. generate↓
transpiled.js↓
webpack 打包输出 bundle.js

身为开发者的我们只需要关注 webpack 相关配置，至于内部如何处理无需关心。

三、Preset（预设）进一步减少我们的心智负担

如果每一个 babel 插件都需要我们手动配置，其实会大大增加我们的工作量，而且这些插件对应的语法都是固定的，有没有这样一种可能，我们可以将同一个类型的插件都合并为一个“插件集合”呢？

有的兄弟，有的。

一个 Preset（预设）就是一个这样的“插件集合”。

你多多少少会听过 @babel/preset-env，这也是我们最常用的预设。

它会自动根据浏览器兼容列表（browserslist）决定启用哪些语法转换。

例如：

// package.json
{// 大厂中我们一般直接继承公司内部的配置包，放到跟仓库供所有包复用：// "extends @your-company/browserslist-config""browserslist": ["> 0.2%","not dead","not op_mini all"] 
}

然后 preset-env 就会根据浏览器的兼容列表自动识别哪些语法需要兼容。

四、你真的无敌了吗 Babel ？

缺陷：Babel 不能转换无法用旧语法表达的特性 / 运行时 API

例如：

Promise
Array.from
String.includes
Object.assign
WeakMap
Symbol
Map
Set
Array.prototype.flat
.....

而这些，还需要 Polyfill 支持（如 core-js）。

core-js 是 polyfill 的集合库。

polyfill 就是 “在旧浏览器里补上新原生 API”。

// 用 preset-env + core-js 自动按需注入 polyfill
["@babel/preset-env", {useBuiltIns: "usage", // 用到了什么新API，就注入对应的 polyfill，而不是注入整个 core-jscorejs: 3
}]

这里再说一下，其他的两个常用包：
@babel/runtime：一般来说 babel 会为每个文件注入 helper 函数，使用了 runtime 包后，这些 helper 会被统一从 "@babel/runtime/helpers/*" 引入，减少重复 helper，减少 bundle 体积
@babel/plugin-transform-runtime：让 Babel 自动从 runtime 引入 helper