17370845950

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 为例）：

• 安装核心依赖：

  npm in
  stall --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 —— 这类写法本身也该被禁止。