浏览器市场占有率
在处理浏览器兼容性问题之前，我们先来看一下现在的浏览器市场份额是怎样的，👇下面是来自statCounter的数据，基本上覆盖了全世界浏览器市场份额的统计，而且前端er经常使用的caniuse所拉取的浏览器数据就是来自statCounter。
世界范围
天朝范围
Plus移动端
分析
从统计数据可以看出，对于国内的PC端浏览器，QQ浏览器以及Sogou的占比还是挺高的，所以在做兼容性处理的时候也需要多考虑这两款浏览器。不过QQ浏览器和Sogou都是封装了Chrome的内核，而它们的更新通常也就是随着Chrome的版本更新而更新，但是这两款浏览器通常不会和Chrome的最新版本同步，而是会有一定的滞后性，所以通常我们兼容的时候要去考虑它们所使用的Chrome内核版本来处理。
Vue CLI3
简述
随着尤大最新力作-Vue CLI3的发布，团队也将项目的脚手架升级为最新的CLI3了，CLI3带来了很多新的特性，比如支持webpack4、支持可视化化地配置项目、封装了很多官方的插件降低了上手的成本等。其中还有对浏览器兼容性的支持-结合了社区最新的工具以及现代模式。而CLI 3.0的浏览器兼容性处理，主要分为三个部分。browserlist、polyfill以及modern mode(现在模式)。
Broserslist
指定项目的目标浏览器范围，这个值会被@babel/preset-env和Autoprefixer等工具用来确定需要转译的JS特性以及需要添加前缀的CSS特性。
{ "browserslist": [ "last 1 version", //表示最新一个版本 ] }
Browserslist本质是对一系列浏览器的queries，查询浏览器的版本， 它会从caniuse中拉取数据来查询！它的好处是给予了开发者一个标准的地方存放项目支持的浏览器版本，他们可以在配置中找到这个支持版本。
下面是用法解释
Transpile
下面要要介绍的是Vue CLI3所用到的Babel预设- @Babel/preset-env，它是在CLI3中指导Babel进行转译的一个工具，说起Babel就不得不提一下转译，和其他语言中的编译不同，转译是类似如下图所示的一个过程：
总的来说，静态语言的编译比如Java是将源代码编译为字节码，这两种通常是处于不同抽象层次的语言，而Transpile的两端本质上是相同层次上的抽象，它一般是从一种支持更高级特性的比如ES2017的实现，转为一种语言特性较少的比如ES5的实现。在解决浏览器兼容性时，很大程度上是需要依赖Babel转译来解决低版本浏览器不支持某些新特性的情况。
CLI3如何使用browserslist以及babel进行转译
babel是一个编译JS文件的和工具。用于编译新JS新特性到支持的目标浏览器。babel/preset-env从browserlistrc文件中加载目标浏览器：
"babel": { "presets": [ [ "@babel/preset-env" ] ] }
然后babel会把新标准中的JS语法特性编译到当前目标浏览器支持的代码：
const array = [1, 2, 3]; const [first, second] = array;
output：
const array = [1, 2, 3]; const first = array[0], second = array[1];
此处的const特性，因为该目标浏览器支持了，所以不需要降级处理。
** Babel的转译可以简单地用以下三个阶段概括: **
parser: 通过babel-parser，基于babel-AST-format将JS代码转译成AST。
transform: 所有的插件/presets进一步做语法等自定义转译，仍然为AST
generator: 最后通过generator生成转译后的字符串。
不同的特性，结合Browserslist以及@Babel/preset-env会根据当前的目标浏览器支持的特性的情况来转译，不支持的特性再去降级处理。Babel本身是个复杂的话题，后续有余力结合编译原理再去深挖一下。
Polyfills
Polyfill通常是在特性检测后，来决定是否需要引入的一段JS代码，它是用基于目标浏览器支持的代码编写的。
if(browserSupportAllFeatures()) { main(); } else { loadScript('polyfills.js', main); }