Babel 的 Polyfill 插件在 IE 浏览器上的使用技巧-JavaScript中文网-JavaScript教程资源分享门户

作为一名前端开发者，我们常常需要在项目中使用一些新的语言特性或者 API。然而，由于各个浏览器的支持度不同，我们往往需要采用类似于“妥协”的方式，将这些新的特性转换成之前版本的 API，以保证代码的正确性和兼容性。这时候，Babel 的 Polyfill 插件就成为了我们的救星。

Babel 是一个广泛应用于前端开发的工具，它可以将 ES6+ 语法转换成 ES5 以及更低版本的 JavaScript 代码，从而使得我们的代码可以在更多的浏览器环境下运行。而 Polyfill 插件则是为了弥补各种新特性在低版本浏览器中缺失的问题而产生的。

Polyfill 的含义

在介绍 Polyfill 之前，我们需要先了解一下什么是“填坑”（Polyfill）。Polyfill 指的是一些特定的 JavaScript 代码，其主要作用是在低版本浏览器上，用于填充 HTML5 和 CSS3 的 API 缺口，从而使得我们的代码在这些浏览器中也可以正常运行。

举个例子：ES6 中引入的 Array.prototype.includes 方法，用于判断一个数组中是否包含某个元素。然而，该方法在 IE 浏览器中是不被支持的。这时候，我们就可以通过使用 Polyfill 的方式，将该方法转换成 ES5 兼容的代码，以使得它在 IE 浏览器中也能够正常运行。

Polyfill 的原理

Polyfill 原理较为简单：判断当前浏览器是否支持某个 API，如果不支持，则手动引入相应的 JavaScript 实现代码。这些实现代码通常会被写在一些 polyfill 库中，并与我们的项目一起加载。

babel-polyfill 和 core-js

在 Babel 中，常常使用的 Polyfill 插件是 babel-polyfill 和 core-js。这两个插件的基本用法如下：

babel-polyfill

babel-polyfill 主要用于填充 ES6 在低版本浏览器中缺失的特性。在引入 babel-polyfill 之后，你的代码就可以放心地使用 ES6+ 的语法了。

import 'babel-polyfill';

core-js

如果你不需要全部的 ES6+ 特性，你也可以使用 core-js，它可以按需加载特定的 Polyfill，从而使打包后的包大小更小。

import 'core-js/fn/promise';
import 'core-js/es6/map';

Polyfill 应用场景

有时候，在使用一些新特性时，我们会遇到低版本浏览器不支持的问题，这时候就可以考虑使用 Polyfill 进行填坑：

ES6+ 语法

在使用一些 ES6+ 的语法时，需要注意其在低版本浏览器中的兼容性问题。例如箭头函数、模板字符串、解构赋值、let 和 const 等语法特性，在 IE 浏览器中是不被支持的。这时候，我们可以使用 babel-polyfill 和 core-js 进行填坑。

新的 API

像 Array.prototype.includes()、Element.classList、Object.assign 等新的 API，在低版本浏览器中也是不被支持的。这时候，我们可以使用 Polyfill 将这些 API 填充到低版本浏览器中，以确保其在所有浏览器中都能够正常使用。

注意事项

在使用 Polyfill 时，需要注意一些细节问题：

Polyfill 的加载顺序

Polyfill 应该在项目的入口处尽可能早的引入。因为如果我们先加载了业务代码，这时再加载 Polyfill，就有可能出现在使用新特性的代码之前，还没有被 Polyfill 填充的情况，也就是说，业务代码中的声明在填坑前是未定义的。

Polyfill 库的安装

通常情况下，在项目中需要用到的 Polyfill 库，我们可以通过 npm 安装，然后在代码中按需引入。例如，如果需要使用 Promise，则可以通过以下命令安装：

npm install --save es6-promise

接下来，在代码中，就可以按照以下方式引入：

import 'es6-promise/auto';

Polyfill 库的大小

Polyfill 库中包含了大量用于填充 API 缺陷的代码，因此会比较大，这会对项目的加载速度造成一定的影响。因此，应该按照实际需求，尽可能地减少不必要的 Polyfill 引入。

示例代码

下面是一个简单的示例，使用了新的 API 和 ES6+ 的语法：

// www.javascriptcn.com code example
if (!Array.prototype.includes) {
    Array.prototype.includes = function(searchElement /*, fromIndex*/) {
      'use strict';
  
      var O = Object(this);
      var len = parseInt(O.length) || 0;
      if (len === 0) {
        return false;
      }
      var n = parseInt(arguments[1]) || 0;
      var k;
      if (n >= 0) {
        k = n;
      } else {
        k = len + n;
        if (k < 0) {
          k = 0;
        }
      }
      var currentElement;
      while (k < len) {
        currentElement = O[k];
        if (searchElement === currentElement ||
           (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN
          return true;
        }
        k++;
      }
      return false;
    };
  }
  
  if (!window.Promise) {
    window.Promise = require('es6-promise').Promise;
  }
  
  const sum = (a, b) => a + b;
  console.log(sum(1, 2));

在这个代码片段中，我们首先判断了 Array.prototype.includes 方法是否存在，如果不存在，则手动将其填坑，使其可以在低版本浏览器中正常运行。接着，我们又判断了 Promise 是否存在，如果不存在，则使用 es6-promise 进行填坑。最后，我们使用 ES6+ 的箭头函数语法，计算出了 1 和 2 的和。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c4bb5e6e1fc40e36dc21d8

Babel 的 Polyfill 插件在 IE 浏览器上的使用技巧