polyfill、shim、babel的区别和联系

886字约3分钟

2021-11-19

shim 和 polyfill 都是打补丁，它们有什么不同呢？为什么一个叫 shim，一个叫 polyfill 呢？

shim是什么?

shim [/ʃɪm/: 垫片] 指的是在一个旧的环境中模拟出一个新 API ，而且仅靠旧环境中已有的手段实现，以便所有的环境具有相同的行为。

比如：Object.defineProperty 是 ES5 中一个无法 shim 的特性，意思就是，Object.defineProperty 这个特性是无法使用低级浏览器中的方法来实现的，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。

polyfill [/pɑ:fɪl/: 填充] 是一段代码(或者插件)，提供了那些开发者们希望浏览器原生提供支持的功能。程序库先检查浏览器是否支持某个API，如果不支持则加载对应的 polyfill。

polyfill 是 shim 的一种实现形式, 特指在浏览器环境下根据现有的API实现兼容旧浏览器的方法，polyfill 是一种实现形式，而 shim 是一种思想。

示例：旧浏览器不支持 ES6 的 Array.prototype.find 方法

function arrayFind () { 
  if (Array.prototype.find) {
    // ... 
  } else {
    // ... 
  }
}

解决办法2: polyfill（判断浏览器是否支持新版浏览器中 Array.prototype.find 这个原生API，如果不支持，就实现一个函数，并赋值给 Array.prototype.find 这个原生API，这样，开发者使用时，就还可以使用 Array.prototype.find 这个原生API啦）

if (!Array.prototype.find) { 
  Array.prototype.find = function() {
    // ... 
  }
}

Babel 是一个 JavaScript 编译器，它可以将 ES6+ 的代码转换为 ES5 代码，以便在旧浏览器中运行。Babel 通过解析、转换和生成代码来实现这一功能。它可以处理语法糖、新的 API 和其他 ES6+ 特性，使其能够在旧版本的 JavaScript 引擎中运行。

功能：Babel 主要用于转换代码，使其能够在旧浏览器中运行；而 polyfill 则是提供缺失的 API 或功能，以确保代码在所有浏览器中都能正常工作。
使用方式：Babel 需要在构建过程中配置和使用，通常是通过命令行工具或配置文件；而 polyfill 可以通过 <script> 标签引入，或者在代码中直接引用。
范围：Babel 可以处理整个项目的代码，包括语法和 API；而 polyfill 通常只针对特定的 API 或功能。
性能：Babel 转换后的代码可能会比原始代码更大，因为它需要包含额外的逻辑来支持旧版本的 JavaScript；而 polyfill 只在需要时加载，因此对性能的影响相对较小。

Babel 和 polyfill 通常一起使用，以确保 JavaScript 代码在不同浏览器和环境中的兼容性。

Babel 可以将新的语法和 API 转换为旧版本的 JavaScript，这可以看作是一种“向下兼容”的方式，因为它允许开发者使用最新的语法和特性，同时确保代码能够在旧的环境中运行。

而 polyfill 可以提供那些旧版本 JavaScript 中缺失的功能，这可以看作是一种“向上兼容”的方式，因为它允许开发者使用新的特性，同时确保代码能够在旧的环境中运行。