阐述 JavaScript 中 Polyfill 和 Transpilation (转译) 的区别，以及它们如何实现对旧浏览器和环境的兼容性。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位老铁，大家好！今天咱们来聊聊前端界两个听起来高大上，但其实挺接地气的概念：Polyfill 和 Transpilation（转译）。它们都是为了解决一个共同的问题：让我们的现代 JavaScript 代码，能在那些“老掉牙”的浏览器或者环境中跑起来。

别怕，今天咱不搞学院派那一套，争取用最通俗易懂的方式，把这两个家伙扒个底朝天。

开场白：为啥我们需要 Polyfill 和 Transpilation？

想象一下，你辛辛苦苦用最新的 ES2023 （假设有这么个东西）写了一堆炫酷的动画和功能，结果用户打开你的网站，一片空白！控制台一堆报错！原因是啥？用户的浏览器太老了，根本不认识你写的那些新语法、新 API。

这就像你跟一个只会说古代汉语的人，用现代英语交流，对方一脸懵逼。

为了解决这个问题，就出现了 Polyfill 和 Transpilation 这两个神器。它们就像翻译官，帮你把现代 JavaScript 代码“翻译”成旧浏览器能听懂的“语言”。

第一部分：Polyfill – 填补缺失的功能

Polyfill，顾名思义，就是“垫片”、“填补”。它主要解决的是API 缺失的问题。

啥意思？就是说，某个浏览器它不支持某个 JavaScript API（比如 Array.from、Promise、fetch 等等），Polyfill 就用 JavaScript 代码模拟实现这个 API，让你的代码可以正常运行。

你可以把 Polyfill 想象成一个万能的“补丁”，哪个浏览器“缺胳膊少腿”，就给它补上。

1.1 Polyfill 的工作原理

Polyfill 的核心思想是：检测浏览器是否支持某个 API，如果不支持，就自己实现一个。

举个例子，Array.from 方法可以将类数组对象（比如 arguments、NodeList）转换成真正的数组。如果某个老旧浏览器不支持 Array.from，我们可以这样写一个 Polyfill：

if (!Array.from) {
  Array.from = (function() {
    var toStr = Object.prototype.toString;
    var isCallable = function(fn) {
      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
    };
    var toInteger = function(value) {
      var number = Number(value);
      if (isNaN(number)) { return 0; }
      if (number === 0 || !isFinite(number)) { return number; }
      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
    };
    var maxSafeInteger = Math.pow(2, 53) - 1;
    var toLength = function(value) {
      var len = toInteger(value);
      return Math.min(Math.max(len, 0), maxSafeInteger);
    };

    return function from(arrayLike/*, mapFn, thisArg */) {
      var C = this;
      var items = Object(arrayLike);
      if (arrayLike == null) {
        throw new TypeError('Array.from requires an array-like object - not null or undefined');
      }
      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
      var T;
      if (typeof mapFn !== 'undefined') {
        if (!isCallable(mapFn)) {
          throw new TypeError('Array.from: when provided, the second argument must be a function');
        }
        if (arguments.length > 2) {
          T = arguments[2];
        }
      }
      var len = toLength(items.length);
      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
      var k = 0;
      var kValue;
      while (k < len) {
        kValue = items[k];
        if (mapFn) {
          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
        } else {
          A[k] = kValue;
        }
        k += 1;
      }
      A.length = len;
      return A;
    };
  }());
}

这段代码看起来有点长，但逻辑很简单：

首先，判断 Array.from 是否存在。 if (!Array.from)
如果不存在，就自己定义一个 Array.from 函数。
这个自己定义的函数，会模拟 Array.from 的行为，将类数组对象转换成数组。

1.2 常见的 Polyfill 库

手动写 Polyfill 固然可以，但很麻烦。幸好，有很多现成的 Polyfill 库可以使用，比如：

core-js: 一个非常全面的 Polyfill 库，包含了 ES5、ES6+ 的各种 API 的 Polyfill。
es5-shim: 专门为 ES5 提供的 Polyfill。
polyfill.io: 一个 CDN 服务，可以根据用户的浏览器 UA，自动提供所需的 Polyfill。

使用这些库非常简单，只需要在你的 HTML 文件中引入它们即可。

例如，使用 core-js：

<script src="https://cdn.jsdelivr.net/npm/core-js@3/umd/minified.js"></script>

或者，使用 polyfill.io：

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

polyfill.io 的 features 参数可以指定需要 Polyfill 的特性，例如 es6 表示 Polyfill ES6 的特性。

1.3 Polyfill 的优缺点

优点：

可以让你的代码在旧浏览器中正常运行。
使用方便，有现成的库可以使用。

缺点：

会增加代码体积，影响页面加载速度。（但可以通过按需加载来缓解）
某些 Polyfill 的实现可能与原生 API 存在差异，可能导致一些意想不到的问题。（这种情况比较少见）

第二部分：Transpilation – 语法转换

Transpilation（转译），也叫 source-to-source compilation，意思是将一种编程语言的代码转换成另一种编程语言的代码。在 JavaScript 的世界里，通常指的是将新的 JavaScript 语法（比如 ES6+）转换成旧的 JavaScript 语法（比如 ES5）。

你可以把 Transpilation 想象成一个“翻译机”，它把你说的高级“现代语”翻译成对方听得懂的“古老语”。

2.1 Transpilation 的工作原理

Transpilation 的核心思想是：将新的语法结构转换成旧的语法结构，但保持代码的语义不变。

举个例子，ES6 引入了箭头函数：

const add = (a, b) => a + b;

这段代码在旧浏览器中可能无法识别。Transpiler 会将它转换成 ES5 的写法：

var add = function add(a, b) {
  return a + b;
};

虽然语法不一样，但代码的功能是一样的。

2.2 常见的 Transpiler

最流行的 JavaScript Transpiler 是 Babel。Babel 可以将 ES6+ 的代码转换成 ES5 的代码，让你的代码可以在各种浏览器中运行。

2.3 如何使用 Babel

使用 Babel 通常需要以下几个步骤：

安装 Babel 相关的依赖:
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env
```
- @babel/core 是 Babel 的核心库。
- @babel/cli 是 Babel 的命令行工具。
- @babel/preset-env 是一个 Babel 预设，可以根据你的目标浏览器环境，自动选择需要转换的语法。
配置 Babel:

创建一个 .babelrc 文件（或者 babel.config.js 文件），配置 Babel 的选项。
```
{
  "presets": ["@babel/preset-env"]
}
```
这个配置告诉 Babel 使用 @babel/preset-env 预设。

你还可以更详细地配置 @babel/preset-env，指定目标浏览器：
```
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 0.25%", "not dead"]
        }
      }
    ]
  ]
}
```
这个配置表示，目标浏览器是：
- 全球使用率超过 0.25% 的浏览器。
- 非 dead 的浏览器（dead 的浏览器是指官方已经停止维护的浏览器）。
运行 Babel:

在你的 package.json 文件中，添加一个 script 命令：
```
{
  "scripts": {
    "build": "babel src -d dist"
  }
}
```
这个命令表示，将 src 目录下的 JavaScript 文件，转换成 ES5 代码，输出到 dist 目录下。

然后，运行这个命令：
```
npm run build
```
Babel 就会自动将你的 ES6+ 代码转换成 ES5 代码。

2.4 Transpilation 的优缺点

优点：

可以使用最新的 JavaScript 语法，提高开发效率。
可以保证代码在各种浏览器中运行。

缺点：

会增加构建流程的复杂度。
会增加代码体积。（但可以通过代码压缩和 tree shaking 来缓解）

第三部分：Polyfill 和 Transpilation 的区别与联系

现在，我们来总结一下 Polyfill 和 Transpilation 的区别：

特性	Polyfill	Transpilation
解决的问题	API 缺失	语法不兼容
工作原理	模拟实现缺失的 API	将新的语法转换成旧的语法
例子	`Array.from`、`Promise`、`fetch`	箭头函数、`class`、`async/await`
最终结果	增加了新的 API 到浏览器环境中	生成了与旧浏览器兼容的 JavaScript 代码
关注点	提供缺失的功能	语法转换

联系：

它们都是为了解决 JavaScript 的兼容性问题。
它们可以一起使用，让你的代码在各种浏览器中运行。

举个例子：

假设你的代码使用了 async/await 语法，并且使用了 fetch API。

async/await 语法需要通过 Babel 进行 Transpilation，转换成 ES5 的语法。
fetch API 如果浏览器不支持，需要使用 Polyfill 来模拟实现。

第四部分：一些小技巧和注意事项

按需加载 Polyfill： 不要一股脑地加载所有的 Polyfill，而是根据用户的浏览器环境，只加载需要的 Polyfill。可以使用 polyfill.io 或者其他类似的库来实现按需加载。
配置 Babel 的目标浏览器： 根据你的项目需求，配置 Babel 的目标浏览器。不要为了兼容所有浏览器，而将代码转换成过于古老的 ES3 代码，这样会降低代码的性能。
使用 Tree Shaking： Tree Shaking 可以移除 JavaScript 代码中未使用的部分，减小代码体积。可以使用 Webpack、Rollup 等工具来实现 Tree Shaking。
测试！测试！测试！： 在各种浏览器中测试你的代码，确保没有兼容性问题。

总结：

Polyfill 和 Transpilation 是前端开发中非常重要的两个概念。它们可以帮助我们解决 JavaScript 的兼容性问题，让我们的代码可以在各种浏览器中运行。希望通过今天的讲解，你对它们有了更深入的理解。

记住，兼容性是前端开发的基石。掌握了 Polyfill 和 Transpilation，你就掌握了解决兼容性问题的利器。

今天的讲座就到这里，谢谢大家！如果还有啥问题，欢迎随时提问！下次有机会再跟大家唠嗑！

发表回复 取消回复

发表回复取消回复