targets 属性是 Babel 实现“按需转译”的核心开关，它基于 Browserslist 数据查表判断目标环境不支持的语法特性，仅对缺失特性启用对应插件，而非全量降级；配置优先级为 babel.config.js > package.json browserslist > .browserslistrc，支持字符串数组和对象两种写法，必须配合 useBuiltIns 和 corejs: 3 才能完整处理 API 兼容性。
targets 属性是 Babel 实现“按需转译”的核心开关，它不决定“要不要转”，而是告诉 Babel “哪些语法在目标环境里原生不支持，才需要转换”。精准适配旧版浏览器的关键，在于明确声明最低兼容版本，并让 Babel 自动匹配对应插件和 polyfill 行为。
targets 的真实作用机制
targets 不是简单地把所有代码降级到 ES5，而是基于 Browserslist 数据（来源 caniuse.com）查表判断：比如你写 const x = 1，Chrome 49+ 原生支持，但 IE11 不支持块级作用域；Babel 就只对 IE11 触发 @babel/plugin-transform-block-scoping，而 Chrome 58+ 下这行代码可能完全不动。
- 配置位置优先级：babel.config.js 中
presets: [["@babel/preset-env", { targets }]]> package.json 的browserslist字段 > .browserslistrc 文件 - 支持两种写法：
– 字符串数组（如["ie >= 11", "safari >= 12"]）
– 对象形式（如{"ie": "11", "safari": "12"}），后者更直观、便于调试 - 没配 targets 时，Babel 默认假设目标是“最老的浏览器”，会全量转译 ES2015+ 语法，体积膨胀明显
针对老旧浏览器的典型 targets 配置示例
不同旧环境需差异化设置，避免过度转译或遗漏关键特性：
-
IE11 全面兼容：
{"ie": "11"}—— 触发 class、箭头函数、Promise、Map/Set 等大量语法和 API 转换 -
Chrome 70 以下 + Safari 13 以下（含私有字段支持）：
{"chrome": "70", "safari": "12"}—— 此时需额外启用@babel/plugin-proposal-class-properties和@babel/plugin-proposal-private-methods，并设loose: true -
兼顾全球覆盖率与性能：
{ "targets": "> 0.5%, not dead" }—— 排除已停止安全更新的版本（如 IE10 及更早），保留仍有实际用户量的旧版
targets 必须配合 useBuiltIns 才完整生效
targets 只管语法转换，API 兼容（如 Array.prototype.flat()、Promise）需靠 useBuiltIns 控制 polyfill 注入方式：
立即学习“Java免费学习笔记（深入）”；
-
useBuiltIns: 'usage'（推荐）：Babel 扫描源码，仅在用到新 API 的地方自动引入core-js/modules/xxx，零冗余 -
useBuiltIns: 'entry'：需在项目入口手动import 'core-js/stable'; import 'regenerator-runtime/runtime';，Babel 替换为 targets 所需的子模块 - 必须指定
corejs: 3：core-js@3 支持实例方法（如[].includes()）、提案级 API（如globalThis），且无全局污染风险
验证 targets 是否生效的实用方法
别只看输出结果，要确认 Babel 真正加载了哪些插件：
- 开启 debug 模式：
{"presets": [["@babel/preset-env", { "targets": {"ie": "11"}, "debug": true }]]}，运行时终端会打印所有启用的插件名（如@babel/plugin-transform-classes） - 检查生成代码是否含预期 helper（如
_classCallCheck）或 polyfill 导入（如require("core-js/modules/es.array.flat");） - 用 browserl.ist 输入你的 targets 字符串，实时查看覆盖的浏览器版本及对应支持状态
