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

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

浏览器兼容性

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

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

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

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

> 1%
last 4 version
not 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 个版本
• 还有一些不太罕用的配置能够查看官网

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

应用办法

1. 在 package.josn 中增加 browserslist 字段

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

3. 命令行应用

   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，对于特定性能，须要装置特定的插件

应用办法

1. 间接在 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 个性
                       ]
                   }
               }
             }
           ]
         }
       ]
     }
   }

2. 创立 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

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