⚡ 30 秒速记

• parse 得语法树 → 插件修改树 → generate 出代码
• 语法转换与运行时能力补齐分开判断
• 目标环境决定转换范围，别默认全部降级
• 辅助函数复用与全局补丁是不同问题
• Proxy 这类能力不能靠普通脚本完整模拟

Babel 主要负责改写代码语法，不会凭空给旧环境补齐所有能力。 它把代码解析成语法树，经过插件转换，再生成目标代码。箭头函数可以改写成其他语法，但 Promise、集合或新的内置方法还要检查运行时支持和补丁方案。实际配置要同时看目标浏览器、库还是应用，以及使用的插件版本，避免把语法已经能解析误当成代码一定能正常运行。

版本校准： 旧文中的 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中，因为它不会污染全局作用域

工具包

babel-cli：babel的命令行工具，通过命令行对js代码进行转译 babel-register：通过绑定node.js的require来自动转译require引用的js代码文件