⚡ 30 秒速记

• 核心判断：源码转换先解析为 AST，再按规则变换结构，最后生成目标代码和位置映射
• 原理主线：围绕 「Babel的包构成」、「babel的配置」、「babel的工作原理」 建立输入、状态变化与输出之间的因果关系
• 文章范围：系统介绍了Babel的核心原理、主要包结构、常用配置方法及其在前端开发中的实际应用，帮助开发者理解如何通过Babel实现ES6+代码向ES5的高效转译与兼容性处理。
• 边界与代价：语法转换不等于补齐运行时能力；错误映射还依赖每一层工具正确传递 Source Map
• 工程落地：配置时要明确目标环境、插件顺序、polyfill 策略和映射暴露范围

Babel 本质上是转译器：先把源码解析成 AST，再由插件遍历并改写节点，最后生成目标代码。 如果没有转换插件，代码基本会原样输出；preset 只是按约定组合一批插件。它主要处理新语法，像 Set、Proxy 和新增实例方法仍需要 polyfill。应用可以补全全局环境，类库则更适合借助 runtime 避免污染全局，但这种方式无法直接补齐实例方法。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

Babel的包构成

核心包

• babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。
• babylon：js的词法解析器
• babel-traverse：用于对AST（抽象语法树，想了解的请自行查询编译原理）的遍历，主要给plugin用
• babel-generator：根据AST生成代码

功能包

• babel-types：用于检验、构建和改变AST树的节点
• babel-template：辅助函数，用于从字符串形式的代码来构建AST树节点
• babel-helpers：一系列预制的babel-template函数，用于提供给一些plugins使用
• babel-code-frames：用于生成错误信息，打印出错误点源代码帧以及指出出错位置
• babel-plugin-xxx：babel转译过程中使用到的插件，其中babel-plugin-transform-xxx是transform步骤使用的
• babel-preset-xxx：transform阶段使用到的一系列的plugin
• babel-polyfill：JS标准新增的原生对象和API的shim，实现上仅仅是core-js和regenerator-runtime两个包的封装
• babel-runtime：功能类似babel-polyfill，一般用于library或plugin中，因为它不会污染全局作用域