Babel 通过“按需转换 + 精准补全”实现语法降级，依据 targets 或 .browserslistrc 明确目标环境，自动启用对应插件；配合 @babel/preset-env 处理语法，用 core-js 和 regenerator-runtime 补全 API，支持 useBuiltIns: "usage" 按需引入 polyfill，并可配置 include 处理 node_modules 中的 ES6+ 依赖。
Babel 针对低版本浏览器做语法降级，核心是“按需转换 + 精准补全”——它不把所有代码一刀切降到 ES5，而是只处理目标环境不支持的语法，并补充缺失的 API。
明确目标环境
告诉 Babel 你要兼容谁，它才能决定哪些语法要动、哪些不用碰。最常用方式是配置 targets 或使用 .browserslistrc：
- 在
babel.config.js中直接写：targets: { ie: "11", chrome: "58" } - 或在项目根目录建
.browserslistrc文件，写：ie >= 11<br>last 2 versions
- Babel 会查兼容性数据库（如 compat-table），自动启用对应插件，比如 IE11 不支持箭头函数、const/let、扩展运算符，这些就会被转；Chrome 90 全支持，相关转换就跳过
用 @babel/preset-env 自动处理语法
这是最推荐的方式，避免手动配一堆插件：
- 安装：
npm install -D @babel/core @babel/preset-env babel-loader - Webpack 中配置 loader：
{ test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: [["@babel/preset-env", { targets: { ie: "11" } }] } } } - 它会把
const add = (a, b) => a + b转成var add = function(a, b) { return a + b; };，也会把 class、解构、模块等结构降级
补全缺失的全局 API（Polyfill）
语法能转，但像 Promise、Array.from、Object.assign 这类新 API 没有语法对应物，必须靠 polyfill：
立即学习“Java免费学习笔记（深入）”；
- 安装：
npm install -S core-js@3 regenerator-runtime - 在入口文件顶部加：
import "core-js/stable";<br>import "regenerator-runtime/runtime";
- 更优做法是设
useBuiltIns: "usage"，Babel 会扫描源码，只引入你实际用到的 polyfill，避免打包冗余代码
注意第三方依赖是否一并处理
默认情况下，Babel 只处理 src 目录，不碰 node_modules。但有些老库本身用了 ES6+ 语法，又没提供 ES5 版本，就得显式包含：
- 在 Webpack 的
babel-loader配置中，把exclude改为更精细的路径，或增加include列出需要转译的包名 - 例如：
include: [path.resolve(__dirname, "src"), /node_modules\/some-es6-lib/]
