ES6在旧浏览器中需通过Babel转译语法并按需注入polyfill补全API，结合.browserslistrc精准控制兼容范围，辅以运行时差异兜底逻辑实现平滑兼容。
ES6在旧版浏览器中无法直接运行，核心在于语法报错（如箭头函数、class）和API缺失（如Promise、Array.includes）。Babel不是“万能补丁”，它只解决语法转换；配合合理的polyfill策略和构建配置，才能真正实现平滑兼容。
明确目标浏览器范围
盲目兼容所有旧版本会增加体积、拖慢性能。应根据真实用户数据确定最低支持版本，例如IE11或Chrome 49。在项目根目录添加.browserslistrc文件：
-
> 0.5%：覆盖全球使用率超0.5%的浏览器 -
last 2 versions：主流浏览器最近两个大版本 -
ie 11：显式支持IE11（若业务必须） -
not dead：排除已停止安全更新的浏览器
用Babel转译新语法为ES5
Babel通过AST解析+插件重写，把现代语法“翻译”成旧环境可执行的等价代码。比如：
-
const foo = () => 'bar'→var foo = function() { return 'bar'; }; -
class Button {}→ 编译为带_classCallCheck、_createClass辅助函数的函数声明
关键配置在babel.config.js中：
立即学习“Java免费学习笔记（深入）”；
module.exports = {
presets: [
['@babel/preset-env', {
targets: { ie: '11' },
useBuiltIns: 'usage',
corejs: 3
}]
]
};
其中useBuiltIns: 'usage'表示只在源码中实际调用了某个API（如Promise.all()）时，才注入对应polyfill，避免全局污染和冗余打包。
按需注入polyfill补全API能力
语法能转，但fetch、Array.from、Object.assign这些API不会凭空出现。Babel本身不提供运行时垫片，需借助core-js：
- 不推荐全局引入完整
core-js，体积过大 - 在入口文件顶部按需导入：
import 'core-js/stable/array/includes'; - 或使用CDN动态加载（适合多页应用）：
<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,fetch,Array.prototype.includes"></script>
注意：像regenerator-runtime需单独引入，以支持async/await——它不在core-js默认范围内。
处理常见运行时差异
有些问题Babel和polyfill都管不了，得靠代码逻辑兜底：
- 事件绑定：
addEventListener在IE8-用attachEvent替代，建议封装统一方法 - DOM操作：
classList在IE9-不支持，可用className.split(' ').includes()模拟 - 样式获取：
getComputedStyle在IE8用currentStyle回退 - 控制台输出：
console.log在旧IE可能未定义，加空函数防报错
这些不是“语法问题”，而是浏览器实现差异，需结合特性检测（if ('fetch' in window)）做条件分支，而非UA判断。
