ployfill是什么

有一些老的浏览器不支持一些api，怎么办呢？那就要手动地去增加一些额外的东西让它可以正常使用啦。

polyfill相当于一段代码，它先检查这个浏览器是否支持某个API，如果不支持就加载对应的polyfill

抛出问题：
vue-awesome-swiper在IE9下报错，是不是不支持IE9？

解答问题：
主要原因是element.classlist.add()方法在ie9中是不支持的。

解决方案：

// 解决方法是加个ployfill：
npm install classlist-polyfill --save
 // 在webpack.base.conf.js中 加入classlist-polyfill，
如：module.exports = 
{entry: 
{  app: 
['classlist-polyfill', 'babel-polyfill', './src/main.js']
},
....

}

之所以能做 polyfill，是因为这些特性都不是语言特性，而是 api，函数，类什么的，它们通过现有的技术是能够实现的。例如以前的 Array.prototype.includes() ，很显然用了Array.prototype.indexOf() 就能实现。而那些与语言特性相关，或者使用了宿主环境不提供的能力的，就无法自拔polyfill 了。例如，fetch 无法完全 polyfill，只能部分模拟，因为它涉及到流，不支持 fetch 的浏览器都没有提供面向流编程的接口。symbol 和 WekMap 也无法 polyfill，它们属于语言特性

咦，你是不是有疑问，babel不是可以做编译吗，可以把高级语法编译成低级语法，达到兼容。

看个例子：

// 转换前代码
let array = [1, 2, 3, 4, 5, 6];
array.includes(item => item > 2);
new Promise()

// Babel转换后代码
var array = [1, 2, 3, 4, 5, 6];
array.includes(function (item) {
  return item > 2;
});
new Promise()

Babel 默认只是转换了 箭头函数 let ,但是Promise 和 includes 都没有转换 ,这是为什么

Babel 把 Javascript 语法 分为 syntax 和 api

先说 api , api 指那些我们可以通过 函数重新覆盖的语法 ，类似 includes,map,includes,Promise,凡是我们能想到重写的都可以归属到 api啥子是 syntax ,像 箭头函数，let,const,class, 依赖注入 Decorators,等等这些，我们在 Javascript 在运行是无法重写的，想象下，在不支持的浏览器里不管怎么样，你都用不了 let 这个关键字

很多人以为只要 引用了 Babel 就不会出现兼容性问题了，这个是大错特错的

所以，在有些情况下，就得需要ployfill的出场相救啦~

shim是什么

一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现 一个polyfill就是一个用在浏览器API上的shim.
polyfill 是 shim 的一种。

标签：浏览器,polyfill,什么,includes,item,api,classlist,ployfill
来源： https://blog.csdn.net/qq_40409143/article/details/118342831