babel通过targets或browserslist精准配置目标环境，自动判断语法转换范围，越贴近真实用户环境，输出越轻、执行越快；推荐用.browserslistrc统一管理以供多工具复用。
直接通过 targets 字段或 browserslist 配置来声明目标浏览器，Babel 就能自动判断哪些语法需要转换、哪些可以保留原生写法。关键不是“配得全”，而是“配得准”——越贴近你真实用户环境，输出越轻、执行越快。
用 targets 显式指定浏览器版本
在 babel.config.js 或 .babelrc 中直接写目标：
-
对象写法：适合明确知道支持范围的场景，比如只兼容 Chrome 87+ 和 Safari 14+
{"targets": {"chrome": "87", "safari": "14"}} -
字符串写法：更灵活，适合按使用率或状态筛选
{"targets": "> 0.5%, not dead, supports esmodules"}
其中not dead表示已停止维护的浏览器（如 IE），supports esmodules表示原生支持 ES 模块的浏览器（Chrome 61+、Firefox 60+、Safari 10.1+）
用 browserslist 统一管理兼容策略
推荐把浏览器规则抽到 browserslist 字段（package.json）或独立的 .browserslistrc 文件里，这样 Webpack、PostCSS、Autoprefixer 等工具也能复用同一套规则：
- 写在
package.json中："browserslist": ["last 2 versions", "not IE - 或新建
.browserslistrc：last 2 Chrome versions<br>last 2 Firefox versions<br>Safari >= 15<br>not OperaMini all
- Babel 会优先读取
@babel/preset-env的targets，其次才是browserslist；两者都未配置时，默认降级到 ES5
避免常见误配
几个容易踩坑的点：
-
别写过宽的目标：比如
"ie 11"会让箭头函数、const、Promise 全部转译，即使你实际用户基本不用 IE -
别混用不兼容的写法：例如
"last 2 versions"和"Chrome 70"同时存在，Babel 会取交集，可能导致意外降级 -
注意 Node 环境特殊性：如果项目跑在服务端（如 Next.js API 路由），可用
{"targets": {"node": "current"}}或{"node": "18.17"}，避免无谓转译
验证配置是否生效
最简单的方法是写一段现代语法（比如可选链 a?.b 或逻辑赋值 x ??= y），然后运行 npx babel src/index.js --presets=@babel/preset-env 查看输出。若目标浏览器已支持，它就不会被转换；反之则会生成兼容代码。也可以加 --verbose 参数查看 Babel 实际启用了哪些插件。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
