前言
在前端开发中，我们经常面临一个重要问题：如何确保我们编写的代码在各种不同的环境和引擎中都能够正常运行？这正是JavaScript领域常见的挑战之一。随着JavaScript语言的不断演进，新特性不断涌现，但不同的浏览器和JavaScript引擎对这些特性的支持却不尽相同，这就导致了兼容性问题。
在这个兼容性的大舞台上，出现了两位重要的"演员"：转译器和Polyfill。它们就像你在陌生国度雇佣的翻译员和翻译小册子，分别为你解决了两种不同的兼容性难题。
一、为什么会有Polyfill和转译器
JavaScript语言不断发展，新提议会经过讨论后加入规范。不同引擎团队决定实现不同特性，导致兼容性问题。检查语言特性的当前支持状态可打开这篇文章查看。
作为开发者，我们希望使用最新特性，那如何让我们现代的代码在还不支持最新特性的旧引擎上工作呢？就要请出今天的主角了：
- 转译器：将新代码转为旧版本以确保兼容性。
- Polyfill（垫片）：填补引擎缺失功能以模拟新特性
二、转译器和Polyfill
转译器
现在假设你打算去一个国家，但你发现那里的人们说的是一种你完全不懂的语言。为了解决这个问题，你雇佣了一个翻译员，他会将你说的话翻译成目的地国家的语言，以确保你能够与当地人交流。
转译器是什么？
转译器就像那个翻译员，可以将源码转换成另一种源码。它能够解析现代代码，并使用旧的语法结构对其进行重写，以便在旧的JavaScript引擎中运行。
例子
举例来说，在ES2020之前，没有"空值合并运算符" ??。如果访问者使用过时的浏览器访问网页，那么浏览器可能无法理解像 height = height ?? 100 这样的代码。
转译器会分析这段代码，并将 height ?? 100 重写为 (height !== undefined && height !== null) ? height : 100
// 转译器之前
height = height ?? 100;
// 转译器之后
height = (height !== undefined && height !== null) ? height : 100;
这样，经过重写的代码就能在较旧版本的JavaScript引擎上正常运行了。
通常，开发者会在自己的计算机上运行转译器，然后将转译后的代码部署到服务器上。
一个著名的转译器是Babel。现代的项目构建系统，如webpack，提供了自动运行转译器的功能，使代码转译能够轻松集成到开发过程中。这样，开发者可以编写现代化的JavaScript代码，同时确保在不同的JavaScript引擎上具有兼容性。
Polyfill
想象一下，你正在计划去一个新的国家旅行，但你只会说自己的母语，而不懂目的地国家的语言。在这个情况下，你可以使用一个翻译小册子，上面有常见短语的翻译，这样你就可以与当地人进行基本的交流了。
Polyfill 是什么？
Polyfill 就像那本翻译小册子，它用于填补缺失功能的脚本，通常用于新的语言特性或内置函数，以便在不支持这些特性的旧浏览器或环境中也能够运行。
例子
举例来说，Math.trunc(n) 是一个用于截断数字小数部分的函数，但在一些非常过时的JavaScript引擎中可能不存在，导致代码执行失败。在这种情况下，可以使用polyfill来添加缺失的功能实现。
以下是Math.trunc的polyfill示例：
if (!Math.trunc) { // 如果没有这个函数
// 实现它
Math.trunc = function(number) {
// Math.ceil 和 Math.floor 即使在古老的JavaScript引擎中也存在
return number < 0 ? Math.ceil(number) : Math.floor(number);
};
}
这个polyfill检查是否存在Math.trunc函数，如果不存在就实现它，以确保在没有原生支持的情况下仍然能够使用该功能。
JavaScript是一种高度动态的语言，允许脚本添加、修改甚至覆盖任何函数，包括内置函数。
有两个常用的polyfill库：
- core-js：它支持许多特性，允许你只包含项目中需要的特性，以减小脚本的大小。
- polyfill.io：这是一个为特定特性和用户的浏览器提供polyfill脚本的服务。它会根据浏览器的需求提供相应的polyfill，以确保在不同浏览器中都具有兼容性。
三、总结
🌍在编程世界中，转译器和Polyfill就像我们的语言翻译员和翻译小册子一样，它们是我们与不同"国家"（不同的JavaScript引擎和环境）进行沟通的桥梁。它们赋予开发者超能力，让我们能够书写现代、高效的代码，同时又能在各种古老的环境中自如地运行。
💻正如在国际旅行中依赖翻译工具一样，我们在编程中依赖转译器和Polyfill来打破语言的障碍，实现跨引擎的兼容性。无论你是追求最新技术的先锋，还是需要支持古老浏览器的务实开发者，这些工具都是你不可或缺的伙伴。
🚀希望这篇文章能对你有所帮助，加油前端人！
