明确目标环境是确保 JavaScript 兼容性的第一步，需确认浏览器或 Node.js 版本以决定语法支持范围；Babel 通过 AST 将新语法转为旧环境兼容代码，但不处理 API，需 core-js 等 polyfill 补充；preset-env 支持按需转换与自动注入 polyfill，plugin-transform-runtime 可抽离重复 helper 函数。
关注目标环境，明确兼容性边界
确保 JavaScript 兼容性的第一步不是立刻写代码或加工具，而是清楚知道你的代码要跑在哪些浏览器或运行时里。比如是否需要支持 IE11？Node.js 最低版本是 12 还是 14？不同环境对 ES6+ 语法、API（如 Promise、Array.from）、甚至新特性（如可选链 ?.、空值合并 ??）的支持程度差异很大。可以查 caniuse.com 或 node.green 获取具体支持情况。明确目标后，才能决定哪些语法能直接用，哪些必须转换或垫片。
Babel 的核心工作：语法转换（Transform）
Babel 本身不执行代码，它把新版 JS 代码当作字符串输入，先解析成抽象语法树（AST），再根据配置的 preset（如 @babel/preset-env）和 plugins，遍历 AST 并重写节点，最后生成兼容旧环境的等效代码。例如：
-
const fn = () => {}→ 转为var fn = function () {} -
class Person { constructor(name) { this.name = name; } }→ 转为基于function和原型链的函数表达式 -
let x = 1; const y = 2;→ 转为var x = 1; var y = 2;（并处理块级作用域逻辑）
注意：Babel 默认只转换语法（syntax），不处理全局 API（如 Array.prototype.includes）。这类需要额外引入 polyfill（如 core-js）。
按需转换 + 自动注入 Polyfill
用 @babel/preset-env 可以避免“一刀切”式降级。它支持通过 targets 字段（如 {"chrome": "58", "ie": "11"}）或 browserslist 配置，让 Babel 只转换目标环境不支持的语法。配合 useBuiltIns: 'usage'，Babel 还能在源码中自动检测用了哪些新 API（如 new Promise()、[1,2].flat()），只导入 core-js 中对应模块，减少包体积。这种方式比全量引入 core-js/stable 更精准高效。
立即学习“Java免费学习笔记（深入）”；
补充运行时能力：Polyfill 与 Helper 函数
语法转换解决的是“怎么写”，而 polyfill 解决的是“有没有这个东西”。比如 Promise 在 IE 中根本不存在，Babel 不会凭空造一个构造函数——它靠 core-js 提供实现。另外，Babel 生成的代码里常有重复的辅助函数（如 _classCallCheck、_defineProperty），默认会内联，也可用 @babel/plugin-transform-runtime 抽离为统一 import，避免重复，也利于 tree-shaking。
