javascript的polyfill和transpiler有何区别_如何使用babel兼容旧浏览器【教程】-js教程-PHP中文网

Polyfill 补功能缺失，Transpiler 改语法不兼容；Babel 不处理运行时 API 缺失，需搭配 core-js 等 Polyfill；按需引入可优化体积，复杂特性应避免手写。

javascript的polyfill和transpiler有何区别_如何使用babel兼容旧浏览器【教程】

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 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，比如：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

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 等专业库处理