前端构建工具集成Babel将ES6+语法降级为ES5，通过preset-env等配置实现浏览器兼容，结合polyfill补充新API，确保代码在旧环境中正常运行。
前端构建工具通过集成 JavaScript 编译器（如 Babel）来实现语法降级。现代 JavaScript（ES6+）中的一些特性在旧版浏览器中无法运行，构建工具在打包过程中自动将这些新语法转换为等效的旧语法，从而保证代码的兼容性。
使用 Babel 进行语法转换
Babel 是最常用的 JavaScript 编译器，能够将高版本 JS 语法转为低版本。构建工具（如 Webpack、Vite、Rollup）通过加载 Babel 插件，在代码打包时完成转换。
核心流程如下：
- 解析源码中的 ES6+ 语法（如箭头函数、解构赋值、类等）
- 利用 Babel 插件将其重写为 ES5 等效代码
- 输出可在旧环境运行的 JavaScript
const add = (a, b) => a + b;
立即学习“Java免费学习笔记（深入）”；
转换为普通函数表达式：var add = function(a, b) { return a + b; };
配置转换规则
构建工具通过配置文件指定需要支持的浏览器环境，Babel 根据目标环境决定哪些语法需要降级。
常用配置方式：
- 在 .babelrc 或 babel.config.js 中设置 presets，如 @babel/preset-env
- 使用 browserslist 配置目标浏览器范围（如 "defaults" 或 "> 1%"）
- preset-env 自动启用必要的插件进行语法转换
处理 Polyfill 补丁
语法降级只解决语言结构问题，新增的全局对象或方法（如 Promise、Array.from）需通过 polyfill 补充。
Babel 可配合 @babel/plugin-transform-runtime 或 core-js 按需引入 polyfill，避免污染全局作用域。
基本上就这些。构建工具结合 Babel 的转换能力和灵活配置，让开发者使用最新语法的同时，仍能兼容旧版浏览器。关键在于正确设置 preset 和目标环境，确保输出代码既现代又可靠。
