這篇 webpack處理css資源 文章中使用到的工具 browserslist 對於相容性處理來說非常重要！這一篇來仔細說說。

查詢相容性

不同瀏覽器對於 css / js 的屬性可能存在相容性，具體可以通過 can i use 這個網站查詢。

比如 css 中的 user-select 屬性，用於規定是否可以在瀏覽器上雙擊選取或者高亮，在 ie 6-9 中不可以使用，在 ie10-11 中需要新增 -ms- 字首。

也就是說，為了多瀏覽器相容性處理，css程式碼可能要寫成這樣

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
 

而在專案中，可能存在相容性的 css 或者 js 程式碼不止一個，而且需要相容性的版本也無法列舉完全，這時候需要通過工具來幫我們處理 ~

相容性規則

browserslist 需要編寫一些瀏覽器相容條件，來告知 postcss 和 babel 分別以什麼要求來對 css 和 js 程式碼進行相容性編譯。

常用的編寫規則有這些

• default：Browserslist 的預設配置
  （ >0.5%, last 2 versions, Firefox ESR, not dead ）
• 5%：通過全域性情況統計選擇的瀏覽器版本，可以使用 >=，< 和 <=
• dead：24個月內沒有官方支援或更新的瀏覽器
• last 2 versions：每個瀏覽器的最後兩個版本

browserslist 是一個工具，可以直接通過 npx 執行命令獲取符合規則的瀏覽器

如果是在專案中，有兩種方式可以配置

• 配置在 package.json 中
• 配置在 .browserslistrc 檔案中

// package.json
"browserslist": [
    "> 1%",
    "last 2 version",
    "not dead"
]

// .browserslistrc
> 1%,
last 2 version,
not dead

編譯過程

那 browserslist 又是去哪裡查詢瀏覽器使用佔比和更新時間的呢，其實它最終使用的是caniuse-lite 這個工具來查詢的，在

比如 chrome for Android 99版本的使用者佔比非常高，達到了 37.21%.

以上就是 browserslist 查詢符合條件的瀏覽器版本和使用過程， 更多有關webpack的內容可以參考我其它的博文，持續更新中~