Polyfill通过模拟实现缺失的API（如Promise）来解决浏览器兼容性问题，而转译（如Babel）将现代JS语法转换为ES5代码以适配旧引擎。两者结合可实现兼容性与性能平衡。
在前端开发中，JavaScript的浏览器兼容性问题一直是一个现实挑战。不同浏览器对新语法和API的支持程度不一，尤其在面对老旧版本IE或移动端低版本内核时，直接使用现代JS特性可能导致脚本报错或功能失效。为了解决这个问题，业界广泛采用两种技术手段：Polyfill 和 转译（Transpilation）。它们共同目标是让现代代码能在旧环境中正常运行。
什么是 Polyfill
Polyfill 的本质是一段“填补”缺失功能的 JavaScript 代码。当某个浏览器不支持某项原生 API（如 Promise、Array.from 或 fetch）时，Polyfill 会模拟实现该功能，使开发者可以像在现代浏览器中一样调用它。
例如，在不支持 Promise 的 IE 中引入如下代码：
if (typeof Promise === 'undefined') {
window.Promise = function(executor) {
// 模拟 Promise 基本行为
// ...
};
}
这就是一个简单的 Polyfill 思路。实际项目中通常不会手动编写，而是使用成熟的库，比如 core-js 或 regenerator-runtime，它们提供了大量 ES5/ES6+ 标准 API 的兼容实现。
立即学习“Java免费学习笔记（深入）”；
转译：让新语法跑在旧引擎上
与 Polyfill 解决 API 缺失不同，转译（Transpilation）解决的是语法不被识别的问题。现代 JavaScript（ES2015+）引入了 箭头函数、class、async/await 等新语法，但老版 JavaScript 引擎无法解析这些结构。
通过工具如 Babel，可以将新语法转换成等价的 ES5 代码。例如：
// ES6 写法
const add = (a, b) => a + b;
// 经 Babel 转译后
var add = function(a, b) {
return a + b;
};
这种转换使得代码能在不支持 ES6 的环境中执行。Babel 配合 @babel/preset-env 可根据目标浏览器范围自动决定需要转译哪些特性，避免不必要的代码膨胀。
Polyfill 与转译如何搭配使用
理想情况下，Polyfill 和转译应协同工作。Babel 能处理语法转换，但默认不包含 API 补丁。你需要额外引入 core-js 并配置 useBuiltIns: 'usage'，这样 Babel 会在检测到使用了某个新 API 时，自动导入对应的 Polyfill。
常见配置示例：
// .babelrc 或 babel.config.js
{
"presets": [
["@babel/preset-env", {
"targets": { "browsers": ["IE 11"] },
"useBuiltIns": "usage",
"corejs": 3
}]
]
}
这种方式按需加载 Polyfill，避免将整个 core-js 库打包进去，提升性能。
注意事项与最佳实践
尽管 Polyfill 和转译能极大提升兼容性，但也需注意以下几点：
- 不要无差别注入 Polyfill：全局污染风险高，推荐按需引入（useBuiltIns: 'usage'）。
- 注意异步相关 API：如 async/await 依赖 regeneratorRuntime，需确保其可用。
- 区分运行时与语法：class 转译靠 Babel，但 Array.prototype.includes 需要 Polyfill。
- 现代项目可适度放宽兼容：若用户集中在现代浏览器，可减少 Polyfill 体积。
基本上就这些。合理使用 Polyfill 和转译工具，既能享受现代 JS 的开发体验，又能稳妥覆盖目标用户环境。关键是根据项目需求配置好构建流程，做到兼容与性能的平衡。
