Polyfill 补功能缺失，Transpiler 改语法不兼容；Babel 不处理运行时 API 缺失，需搭配 core-js 等 Polyfill；按需引入可优化体积，复杂特性应避免手写。
Polyfill 和 Transpiler 解决的是两类完全不同的兼容性问题：一个补“功能”，一个改“语法”。 你写 Promise.allSettled()，IE11 直接报 TypeError: Object doesn't support property or method 'allSettled' —— 这是 Polyfill 的活；你写 const fn = () => {}，老引擎直接 SyntaxError 报错卡死 —— 这得靠 Transpiler（比如 Babel）提前转成 var fn = function() {}。
为什么不能只用 Babel？—— 它不处理 API 缺失
Babel 是个语法重写器，它能看到 async/await、class、?. 这些新写法，并把它们变成老浏览器能 parse 的代码。但它看不到运行时缺失的全局对象或原型方法，比如：
-
Array.prototype.flat()在 IE 和早期 Edge 中根本不存在，Babel 不会、也不能给Array.prototype加这个方法 -
fetch()是一个全局函数，Babel 不会自动注入它的实现 -
Map、Set、Promise这些构造函数，Babel 默认不提供替代实现
换句话说：Babel 转译后，代码能“跑起来”；但跑起来之后调用一个不存在的 API，照样崩溃。
如何用 Babel + Polyfill 实现真正兼容？—— 三步配齐
现代项目里，Babel 本身不自带 Polyfill，必须显式引入。推荐组合方式（以 Webpack + Babel 为例）：
立即学习“Java免费学习笔记（深入）”；
- 安装核心依赖：
npm install --save-dev @babel/preset-env npm install --save core-js@3 regenerator-runtime
- 在入口 JS 文件顶部（如
index.js）最前面引入：import 'core-js/stable'; import 'regenerator-runtime/runtime';
（注意顺序：先core-js/stable，再regenerator-runtime/runtime） - 配置
.babelrc或babel.config.js，明确目标浏览器：{ "presets": [ ["@babel/preset-env", { "targets": { "ie": "11", "chrome": "49" }, "useBuiltIns": "usage", "corejs": 3 }] ] }其中"useBuiltIns": "usage"表示按需引入 Polyfill（比如只用了Array.prototype.includes，就只打进去这一个），避免全量加载拖慢首屏。
手写 Polyfill 的边界在哪？—— 别碰复杂特性
你可以安全地为简单方法写 Polyfill，比如：
if (!String.prototype.replaceAll) {
String.prototype.replaceAll = function(search, replace) {
return this.split(search).join(replace);
};
}但以下情况强烈不建议手写：
-
Promise或fetch：涉及微任务队列、网络请求状态机等底层机制，手写极易出竞态或内存泄漏 -
Map/Set：需要正确实现迭代器协议（[Symbol.iterator]）、键值唯一性、弱引用语义等，core-js的实现经过大量浏览器实测 -
Intl相关 API（如Intl.DateTimeFormat）：依赖庞大 ICU 数据，Polyfill 体积动辄几百 KB，应交由@formatjs/intl等专业库处理
真实项目中，core-js 已覆盖 95%+ 常见需求，手动 Polyfill 只适合极简场景或学习目的。
最容易被忽略的一点：即使配置了 useBuiltIns: "usage"，如果代码里有动态字符串拼接调用（比如 eval('Array.prototype.includes')），Babel 无法静态分析，就不会注入对应 Polyfill —— 这类写法本身也该被禁止。
