关于前端:浏览器兼容以及PostCSS详解

本系列文章是我在学习webpack时的总结与播种。本片文章为系列文章的第三篇，蕴含对于很对新的前端开发者经常疏忽的浏览器兼容性问题以及postcss应用

浏览器兼容性

以后市场上有很多浏览器，对不同浏览器的适配，咱们应该如何解决呢？

首先须要留神的是，这里的浏览器适配指的是针对不同浏览器个性的反对：比方，CSS 个性、JavaScript 语法个性等

那么，这里就有一个问题，如何确定反对哪些版本的浏览器呢？

在我的项目开发中，咱们常常在 .broswerslistrc 或 package.json 中看到如下配置：

> 1%last 4 versionnot dead

通过这些配置在 "Can I use" usage table 中查问符合条件的浏览器，再去针对这些浏览器去作个性的兼容。

为了可能在多个前端工具中共享这些配置，须要应用一个叫做 browserlist 的工具

Browserslist

在不同前端工具之间共享指标浏览器和 Node.js 版本的配置。它用于：

Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
obsolete-webpack-plugin

browserslist 编写规定

defaults: Browserslist 的默认浏览器（>0.5%, last 2 versions, FIrefox ESR, not dead）
5%：通过寰球应用状况统计信息抉择的浏览器版本
dead：24个月内没有官网反对或更新的浏览器。目前是IE 10，IE_Mob 11
last 2 versions：每个浏览器的最新2个版本
还有一些不太罕用的配置能够查看官网

多个条件之间的关系如下图所示：

应用办法

在package.josn中增加 browserslist 字段

在根目录下增加 .browserslistrc 文件，在该文件中写入配置

命令行应用
npx browserslist ">1%, last 2 versions, not dead"
npx browserslist ，前面不加参数，也能够应用，不加参数时，就会去当前目录查找 .browserslistrc 文件中的条件

上述三种应用办法，前两种是咱们在平时开发中常常应用的办法。例如，autoprefixer、babel 会主动寻找 package.json 中的 browserslist 字段或 .browserslistrc 文件，而后主动应用 caniuse-lite 工具查问符合条件的浏览器，进而对指标浏览器作个性兼容等解决。

caniuse-lite

该工具并不是发送申请到 Can I use... Support tables for HTML5, CSS3, etc ，而后取得符合条件的浏览器数据。caniuse-lite 自身就是一个小型的数据集，以紧凑的格局保留数据的重要局部。

因而，无论是autoprefixer还是babel只须要依据 .browserslistrc 文件筛选出对应的浏览器即可

PostCSS

PostCSS 是一个通过 JavaScript 转换款式的工具，能够帮忙咱们进行 CSS 转换和适配，比方主动增加浏览器前缀、CSS 款式重置。然而要想实现上述性能，必须借助于对应的插件

在 webpack 中应用 Postcss，须要先装置 postcss-loader 和 postcss。通过 postcss-loader 应用 postcss，对于特定性能，须要装置特定的插件

应用办法

间接在module中编写配置

module.exports = {  module: {    rules: [      {        test: /\.css$/,        exclude: /node_modules/,        use: [          {            loader: 'style-loader',          },          {            loader: 'css-loader',            options: {              importLoaders: 1,            }          },          {            loader: 'postcss-loader',            options: {                postcssOptions: {                    plugins: [                        require('autoprefixer'),       // 增加浏览器前缀                        require('postcss-preset-env')  // 该插件能够应用一些将来的CSS个性                    ]                }            }          }        ]      }    ]  }}

创立 postcss.config.js 文件，在给该文件中增加应用的loader。这种形式更加简洁相较于第一种
```
module.exports = {  plugins: [    require('autoprefixer'),    require('postcss-preset-env')  ]}
```

importLoaders

该选项用于解决一个 CSS 文件，通过 @import 的形式引入另一个CSS 文件的状况

/* index.css */@import "./test.css/"/* test.css */:fullscreen {}.content {  user-select: none;}

在这种状况下，如果不增加 importLoaders 选项，那么 test.css 中的款式是不会被解决的。

起因在于，当匹配到 css 文件时，首先应用 postcss-loader 解决 index.css 文件，它并不会依据@import 语法去解决引入的 test.css 文件。而后应用 css-loader进行解决，css-loader 能够依据@import 解决引入的 test.css 文件，这就导致 test.css 中的文件其实并没有被 postcss 解决

为了解决这种问题，能够在css-loader的options中增加一个 importLoaders 选项

{    loader: 'css-loader',    options: {        importLoaders: 1  // 该数字代表须要后面几个loader再次解决    }}

其意思是，当应用 css-loader时，再应用css-loader之前的若干个loader解决一次

reference

browserslist/browserslist: Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env (github.com)
"Can I use" usage table