在现代 web 开发中，保持不同浏览器和环境之间的兼容性是一个至关重要的挑战。帮助开发人员克服这个问题的两个重要工具是转译器和polyfills。两者的目的都是使代码能够跨不同平台工作，它们以不同的方式运行。

什么是转译器

转译器是一种将以一种语言或语法编写的代码转换为另一种语言或语法的工具。特别是，在 javascript 上下文中，转译器将现代 javascript (es6+) 转换为较旧版本的 javascript（例如 es5），以便环境中较旧的浏览器可以理解。

要点：

- 语法级转换： 转译器通过将较新的语法和功能（例如 let、const、箭头函数）转换为旧版本中的等效结构来转换代码。它确保相同的代码在不同的环境中运行。

例如babel - 将现代 es6+ 代码转换为 es5。
typescript 编译器 - 将 typescript 转换为纯 javascript。

es6 代码

let greet = () => console.log("hello world!");

转译器会将其转换为 es5，看起来像：

var greet = function () {
console.log("hello world!");

什么是 polyfill？

polyfill 是一段代码，它提供旧版浏览器或环境中缺少的功能。它“填补”了其中的空白。某些功能本身不支持。

要点：

-功能级别模拟： 与转换代码语法的转译器不同，polyfill 实现了缺失的功能。

• polyfills 在运行时添加，不会修改源代码。

例如 - 包括填充

对于不支持array.prototype.includes方法的浏览器，可以像这样实现polyfill：

if(!Array.prototype.includes) {
Array.prototype.includes = 
  function(searchElement) {
    return this.indexOf(searchElement) !== -1
  }
}

主要区别

通过使用转译器，我们可以确保代码与旧环境兼容，而polyfills允许添加缺失的功能。它们共同允许开发人员编写现代、高效的代码，而不必担心破坏对旧平台的支持。

以上就是Transpiler 与 Ployfills的详细内容，更多请关注php中文网其它相关文章！