初次了解polyfill

最近经常看到这个词，知道这是处理浏览器相关的东西，但是不知道怎么用

参考

首先要了解一下，ECMAScript5(2009)，大部分浏览器都支持，参考资料，比如这个Object/array literal extensions - Getter accessors，在w3c上看js - js objects - object accessors，在mdn上看js - js reference - functions - getter，看Specifications有个ECMAscript5.1(ECMA-262)，状态是Standard，然后看Browser compatibility上Desktop browsers，get在IE9是支持的，就是说IE8不支持。

查看wiki关于polyfill的介绍，这里面提到了es5-shim，说的是ECMAScript 5th Edition。

然后看一下某个polyfill的网站，可以看到在SUPPORTED BROWSERS看到Internet Explorer最小支持的版本是8，然后可以自己生成需要的polyfill文件，不过没看明白这上面是不是很多内容都不支持？

在mdn中，一般的词条后面都会有Browser compatibility

在这个ECMAScript兼容性表中查很详细，不过只提到了IE11

在babel的官方查文档，即Docs - Usage - polyfill里面，有提到了@babel/polyfill这个包，这上面提到Babel 7.4.0这个包就被弃用了

在babel的官网查看General - Caveats，里面提到了ES5和Internet Explorer，可以说使用@babel/polyfill可以兼容一些老的浏览器

在webpack官网查文档，在DOCUMENTATION - CONCEPTS - Concepts - Browser Compatibility提到兼容性问题，然后webpack支持在所有服从ES5的浏览器（IE8和以下版本不支持），就是说经过webpack打包的文件，基本支持大部分浏览器，IE8老古董了，估计要用Polyfill了。

在webpack的DOCUMENTATION - GUIDES - Shimming - Loading Polyfills 说到如何加载polyfill，在DOCUMENTATION - LOADERS - babel-loader - Babel is injecting helpers into each file and bloating my code!这里有提到babel的runtime包是不是包含了polyfill。

测试案列：

比如这样一个代码

let a = [1,2,3]
let b = [4,5,6]
let c = [...a,...b]console.log(c)// 期待输出是[1,2,3,4,5,6]

这里用到了spread syntax，搜索a better way to concatenate arrays，这个属于spread in array literals，然后看到Internet Explorer不支持。

使用Chrome打开控制台看到了输出没报错，使用Internet Explorer11的话，就会看到报错syntax error

使用webpack进行打包，在只有webpack和webpack-cli的情况下使用

使用打包后的js文件，使用Internet Explorer11发现结果是正常输出了。不过Internet Explorer11以下就不知道了，很可能就是不支持的，之前提到这些浏览器要服从ECMAScript5，就是看这个表

这里没有我还安装不了IE11以下的版本，就算安装也比较麻烦，所以这里就不测试了。

不过文章中提到要加载Polyfill。

下面测试一下ES2016的语法可以用不

测试案例：

var array1 = [1,2,3]console.log(array1.includes(2))// 期待输出是true

这个在mdn中js -js ref - standard built-in objects - Array - Array.prototype.includes()

在IE11中测试报错Object doesn't support property or method 'includes'，使用chrome的话输出true，现在用webpack打包npx webpack，继续测试IE11还是这个报错。

不过发现IE11浏览器的可以模拟低版本的IE浏览器，11,10,9,8,7,5这几个版本。

总结：

一般自己先了解一下哪些方法某些浏览器可能不支持，然后看Specifications(规范)知道这是ECMAScript 2015语法，看Browser compatibility(浏览器兼容性)看到，使用webpack打包基本能处理ECMAScript2015成ECMAScript5，而且旧浏览器的话需要使用polyfill，然后想要处理ECMAScript2016+的话，可能就要用到babel了。