浏览器兼容性问题是什么

现在市面上，有各式各样的浏览器，而每个浏览器的版本又是非常多的。它们各自又支持不同的特性，比如对于css特性、js语法等。这就导致我们在开发中必须考虑到浏览器兼容性的问题。

这篇总结文章会涉及到browserslist、postcss、autoPrefixer、postcss-preset-env等工具。

Browserslist

既然我们在开发时需要考虑到浏览器兼容性这个问题，那我们怎么确定我们开发的项目要兼容哪些浏览器呢？ 哪些浏览器的哪个版本是我们需要兼容的，试想一个个罗列出来，那是基本很难实现的事情。那我们怎么解决呢？

目前我们前端已经非常的工程化了。那么是否有这样一个工具帮助我们进行统计呢？答案就是browserslist。

定义

browserslist是一个在不同的前端工具之间共享 目标浏览器 和 Node.js版本 的配置。

browserslist会做什么事呢？
Browserslist会将满足条件的浏览器信息，共享给其他工具去解决浏览器兼容性问题。比如Autoprefixer、Babel、postcss-preset-env等。

Browserslist配置

在很多项目里，我们都是在根目录的browserslistrc文件里看到如下配置。这个时候我就很迷惑，这些是个啥？
先说结论：这些就是一个个的条件，告诉我们的browserslist工具，我们的项目需要兼容满足一下这些条件的浏览器，你帮我找出来都有哪些浏览器是符合的。 

  1. //browserslistrc  
  2. >1%  
  3. last 2 version  
  4. not dead

在学习这些条件前，我们需要先了解浏览器的市场占有率等，我们可以到caniuse网站去查询到下边图片展示的信息，其中包含各个浏览器各个版本的市场占有率。
890b342557cc37479d4a37fa7aada3ec.png

然后我们就可以来学习刚才说到的条件各自的含义：
>1%：浏览器的市场占有率需大于百分之一；
last 2 versions：最近的两个版本；
not dead：没有死亡（距离上一次更新不超过24个月；

配置browerslist的两种方案：

方案一：在package.json里配置
988f06976b49f9c07d2c329bb77047ab.png

方案二：创建browerslistrc文件进行配置
3d883b10cb9636d9e9cddf17863ed6ef.png

配置规则：

  1. 使用逗号或者or隔开，都是满足任一条件即可；
  2. 使用and隔开，需要满足全部条件

browserslist安装：无需手动安装，在安装webpack时就会帮助我们自动安装

browserslist使用：无需手动使用，因为它只是为了给其他工具共享信息的。其他工具库会去找当前项目是否有browserslist的配置。
当然在命令行去使用也可以。在node_modules/bin文件夹下就能找到我们的browserslist，所以我们就可以在命令行通过如下命令使用。

npx browserslis

Postcss在webpack里的使用

定义

一个通过JavaScript来转化css的工具。

这个怎么理解呢？
举个例子：css-loader与style-loader也是通过JavaScript来转化css的。在打包时，css-loader使用js将css代码转化为js，然后style-loader使用js在header下创建一个style，将所有的css转化出来的js代码放到style里。
这样就很好理解为什么postcss是使用js来转化css的工具了。而且在实际开发中，postcss转化完还是需要交给css-loader和style-loader来处理的。

Postcss都做了什么事情呢？

postcss会根据browserslist配置共享出来的浏览器信息，去给css样式进行一些css的转化与适配，比如添加需要的浏览器前缀、css样式重叠等，去解决浏览器兼容性问题。

如何使用postcss呢？

下面将在webpack中配置postcss + autoprefixer，去实现css适配不同浏览器。

第一步：安装postcss-loader
第二步：添加postcss需要用到的相关插件（比如说postcss要想实现添加浏览器前缀，单靠自己还完成不了，还需要依赖到Autoprefixer插件）

安装：

npm i postcss-loader autoprefixer --save-dev

使用：

//webpack.config.js
{  
  // 规则使用正则表达式  
  test: /\.css$/, 
  use: [  
    "style-loader",   
    {  
      loader: "css-loader",  
      options: {  
        importLoaders: 1  
      }  
    },  
    {  
      loader:'postcss-loader',  
      options:{  
        postcssOptions:{  
          plugins:[  
            require('autoprefixer')  
          ]  
        }  
      }  
    }  
  ],  
},

另一种方式：
也可以将postcss-loader的配置抽离出来。

//postcss.config.js  
module.exports = {  
  plugins: [  
    'autoprefixer'  
  ]  
}

在根目录下创建postcss.config.js文件，将postcss-loader的配置放到这个文件里

{  
  // 规则使用正则表达式  
  test: /\.css$/, // 匹配资源  
  use: [  
    "style-loader",  
    {  
      loader: "css-loader",  
      options: {  
        importLoaders: 1,  
      },  
    },  
    "postcss-loader",  
  ],  
},,

autoPrefixer与postcss-preset-env

在前面对autoPrefixer的使用中，不难看出，autoPrefixer的作用，就是给css代码添加浏览器前缀。
但是在很多脚手架里，用得更多的是postcss-preset-env插件（而不是autoPrefixer）。

postcss-preset-env插件是什么呢？
postcss-preset-env内置了autoPrefixer，所以autoPrefixer有的功能它都有。而且postcss-preset-env比autoPrefixer更强大。

下边举例证明下强大在哪里：

/*rgb为6位，rgba位8位*/  
color:#12345678  

/*使用autoPrefixer转化后，还是保持8位数字。*/  
/*新版本浏览器是认识8位rgba的，但是旧版本浏览器直接无视最后两位*/  
color:#12345678  

/*使用postcss-preset-env转化后*/  
color:rgba(18,52,56,0.47059)

Postcss-preset-env的使用：使用方法与autoPrefixer一模一样，都是作为postcss-loader的插件。

//postcss.config.js  
module.exports = {  
  plugins: [  
    'postcss-preset-env'  
  ]  
}