Babel通过@babel/preset-env实现语法转换，根据目标环境自动转译高版本JS代码，结合useBuiltIns: 'usage'按需注入core-js 3的polyfill，避免全局污染；同时使用@babel/plugin-transform-runtime抽离辅助函数，减少重复代码并隔离副作用，适合库或组件开发。关键在于明确浏览器目标，合理配置转换与注入策略，兼顾兼容性与打包效率。
JavaScript的兼容性处理离不开Babel，尤其是在现代语法与旧环境共存的项目中。Babel的核心能力是将高版本JS代码转译为低版本可执行代码，而配置的关键在于语法转换和polyfill注入策略的合理选择。下面从实际配置出发，说明如何高效使用Babel。
语法转换：@babel/preset-env 的智能控制
Babel本身不自带转换规则，需要通过预设（preset）来启用。最常用的预设是 @babel/preset-env，它能根据目标浏览器环境自动决定需要转换哪些语法。
基础配置如下：
{ "presets": [ [ "@babel/preset-env", { "targets": { "chrome": "79", "ie": "11" } } ] ] }这个配置表示：只转换在Chrome 79以下或IE 11中不支持的语法。例如，箭头函数、解构赋值会被转成function和var声明，而class语法也会被转换为原型写法。
立即学习“Java免费学习笔记（深入）”；
你还可以通过 useBuiltIns: 'usage' 启用按需polyfill注入，避免全局污染。
Polyfill 注入：三种模式的选择
Polyfill用于补全低版本JS缺失的API，比如Promise、Array.from、Object.assign等。Babel提供三种策略：
- false（默认）：不自动注入polyfill，需手动引入core-js或regenerator-runtime
- entry：在入口文件手动 import '@babel/polyfill'（已废弃），推荐改为 import 'core-js/stable'; import 'regenerator-runtime/runtime';
- usage：Babel根据代码中使用的API自动导入所需polyfill，最推荐的方式
使用 usage 模式示例：
{ "presets": [ [ "@babel/preset-env", { "targets": "> 0.5%, not dead", "useBuiltIns": "usage", "corejs": { "version": 3, "proposals": true } } ] ] }
这样，当你写了 Array.from([...])，Babel会自动在该文件顶部插入 import "core-js/modules/es.array.from";，仅在需要的地方加载，减少打包体积。
避免全局污染：runtime转换插件
某些语法转换会引入辅助函数（如 _classCallCheck），默认会内联到每个文件，造成重复。使用 @babel/plugin-transform-runtime 可以将其抽离为模块引用。
安装：
npm install --save-dev @babel/plugin-transform-runtime使用：
{ "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 3, "helpers": true, "regenerator": true } ] ] }配合 @babel/runtime-corejs3 使用，可以避免污染全局作用域，适合开发库或组件。
基本上就这些。合理配置 preset-env 和 polyfill 策略，能让代码既现代又兼容。关键是明确目标环境，选择 usage + core-js 3 的组合，再视情况决定是否启用 transform-runtime。不复杂但容易忽略细节。
