详解Vue Cli浏览器兼容性实践

浏览器市场占有率

在处理浏览器兼容性问题之前，我们先来看一下现在的浏览器市场份额是怎样的，👇下面是来自statCounter的数据，基本上覆盖了全世界浏览器市场份额的统计，而且前端er经常使用的caniuse所拉取的浏览器数据就是来自statCounter。

世界范围

Plus移动端

Transpile

下面要要介绍的是Vue CLI3所用到的Babel预设- @Babel/preset-env，它是在CLI3中指导Babel进行转译的一个工具，说起Babel就不得不提一下转译，和其他语言中的编译不同，转译是类似如下图所示的一个过程：

Vue CLI 3 现代模式：

解释

<script src="/xx/sxx.js" nomodule></script>

script标签中声明了nomodule特性的，会告诉支持ES2015 Module的浏览器，不要去执行这个脚本。这种标签通常就是在老旧浏览器中使用的，引用的是带有legacy标识的脚本。

<script type="module" src="/xxx/sss/a.js"></script>

当script标签中声明了type特性的值为module时，浏览器就会把里面的代码视作一整个JS模块，脚本内容的处理不受charset和defer属性的影响，代码的行为可能会与不指定为module时表现得不同。 (以前type的值一般是JS MIME值，在符合HTML5的浏览器，表示脚本为JS。但现在H5规范要求开发者省略这个属性而不提供冗余的MIME类型。)

小结

Vue CLI 3提供了一整套的解决方案，里面提供了社区以及Vue官方的工具，包含Browserslist、Babel、@Babel/preset-env以及现代模式来共同处理浏览器兼容性这个大坑。CLI3构建出的工程会利用Browserslist去进行浏览器查询(包括类型和版本)，然后结合预设对Babel进行配置共同来针对目标环境对源代码进行转译或引入Polyfills来解决兼容性问题。Moreover，现代模式同样会根据这些设定以及目标环境去构建出适合运行在支持项目所有新特性的浏览器以及不支持特性的浏览器的两种包。最后，预告一下，下一篇文章会结合Modernizr和CLI3来进行实践 ---- 《浏览器兼容性实践-Mondernizr篇》

Reference

Stat Counter

浏览器对H5、CSS3特性支持

目标浏览器配置表

browserlist

Vue CLI3

Babel

Babel AST format

到此这篇关于详解Vue Cli浏览器兼容性实践的文章就介绍到这了,更多相关Vue Cli浏览器兼容性内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！