Vue Cli浏览器兼容性实践

浏览器兼容性：Vue CLI实践详解

在这个数字化时代，浏览器兼容性成为了每一个前端开发者必须面对的挑战。在深入Vue CLI浏览器兼容性实践之前，我们先来了解一下当前的浏览器市场份额。

全球浏览器市场的竞争态势可谓千变万化，而QQ浏览器和搜狗浏览器在国内的PC端市场仍占有一席之地。这两款浏览器大多基于Chrome内核，其更新速度虽不及Chrome的版，但仍然需要我们关注。为了更好地兼容这些浏览器，我们需要深入理解它们的Chrome内核版本，以确保我们的代码能在这些浏览器上顺畅运行。

随着Vue CLI3的发布，团队将项目的脚手架升级到了的版本。CLI3带来了许多强大的新特性，其中包括对浏览器兼容性的出色支持。它结合了社区的工具和现代模式，为我们提供了强大的支持。而CLI 3.0的浏览器兼容性处理主要依赖于三个工具：browserslist、polyfill以及modern mode。

Browserslist是一个强大的工具，它允许我们指定项目的目标浏览器范围。这个值将被@babel/preset-env和Aurefixer等工具使用，以确定需要转译的JS特性以及需要添加前缀的CSS特性。Browserslist的本质是对一系列浏览器的查询，它会从caniuse中拉取数据来查询。它的好处是给予开发者一个标准的地方来定义项目支持的浏览器版本，让他们可以在配置中轻松找到这个支持版本。在使用Browserslist时，我们需要注意选择正确的查询语句，以确保我们的代码能够在目标浏览器上正常运行。

在解决浏览器兼容性问题时，Babel的转译功能起到了关键作用。不同于其他语言中的编译过程，转译是将一种支持更高级特性的代码转换为一种语言特性较少的代码。在前端开发中，我们通常需要利用Babel将新的JS特性转译为旧版本浏览器能够理解的代码。Vue CLI3中使用的@babel/preset-env就是指导Babel进行转译的利器。通过这个工具，我们可以轻松地将新的JS特性转译为旧版本浏览器能够理解的代码，从而确保我们的应用在这些浏览器上能够正常运行。

深入 Babel 及其 preset-env 从 browserlistrc 文件中加载目标浏览器的机制

在前端开发中，Babel是一个不可或缺的转译工具，特别是在处理新标准中的JS语法特性时。在项目中，我们常常使用"@babel/preset-env"这个预设来确保代码能够在目标浏览器上顺利运行。

Babel的工作过程大致可以分为三个阶段：

1. （parser）：通过babel-parser将JS代码转换为抽象语法树（AST）。

2. 转换（transform）：应用所有的插件/预设进一步进行语法等自定义转译，仍然为AST。

3. 生成（generator）：通过生成器生成转译后的字符串。

"@babel/preset-env"是一个智能预设，它可以根据browserlistrc文件中定义的目标浏览器环境来转译JS代码。这意味着，如果目标浏览器不支持某些新的JS语法特性，Babel会将这些特性进行降级处理，以保证代码能够在目标浏览器上运行。如果目标浏览器支持某些新的语法特性，那么这些特性就会被保留在编译后的代码中，无需进行降级处理。这就是Babel的强大之处。

Vue CLI的浏览器兼容性实践——现代模式篇

在前端开发中，浏览器兼容性一直是一个令人头疼的问题。幸运的是，Vue CLI 3为我们提供了一个全新的解决方案——现代模式。那么，什么是现代模式呢？简单来说，它就是为了解决支持更老浏览器而需要交付笨重代码的问题而诞生的。就像狼蚁网站的SEO优化一样，现代模式能让我们更加高效地运行项目。

使用Vue CLI 3内置的Service服务，我们可以调用webpack进行构建编译。生成的是两种类型的包：现代版包和旧版包。现代版包不会引入额外的polyfill，更加轻便。而旧版包则针对不支持新版特性的浏览器，根据browserslist和babel-preset-env的配置引入必要的polyfill。

在现代模式下，现代版包会通过