〇、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
例如：
PromiseArray.fromString.includesObject.assignWeakMapSymbolMapSetArray.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
这里暂时不提供大厂完整配置代码，因为很多复杂配置可能同学们看不太懂。
所以，点赞 + 收藏 + 关注，直到工程化系列文章更新完毕，再为大家展示真实大厂项目中的前端工程化完整配置。
)
