[TOC] # 目標瀏覽器配置表 [`browserslist`](https://github.com/browserslist/browserslist)能在不同前端工具之間共享目標瀏覽器和 Node.js 版本的配置。 `browserslist`使用[caniuse-lite](https://www.npmjs.com/package/caniuse-lite)和[caniuse](https://caniuse.com/)進行查詢。 ## 這個`browserslist`有什么用呢？ 根據提供的目標瀏覽器的環境來，智能添加 css 前綴，js 的 polyfill 墊片,來兼容舊版本瀏覽器，而不是一股腦的添加。避免不必要的兼容代碼，以提高代碼的編譯質量。 ## 使用 browserslist 的組件 | 組件名 | 功能 | | --- | --- | | Autoprefixer | postcss 添加 css 前綴組件 | | @babel/preset-env | 編譯預設環境 智能添加 polyfill 墊片代碼 | | eslint-plugin-compat | | | stylelint-no-unsupported-browser-features | | | postcss-normalize | | | more... | ## 基礎語法 只要`package.json`配置了`browserslist`對象，需要的組件將自動匹配到并使用，也可以配置到具體的組件參數上： ~~~ // package.json { ... "browserslist": [ // 注意：是一個數組對象 "> 1%", "last 2 versions" ] ... } ~~~ `last 2 versions`：CanIUse.com 追蹤的 IE 最新版本為 11，向后兼容兩個版本即為10、11 ## 設置語法 通過瀏覽器過濾的思路實現，默認是兼容所有最新版本 | 例子 | 說明 | | --- | --- | | `> 1%` | 全球超過1%人使用的瀏覽器 | | `> 5% in US` | 指定國家使用率覆蓋 | | `last 2 versions` | 所有瀏覽器兼容到最后兩個版本根據CanIUse.com追蹤的版本 | | `Firefox ESR` | 火狐最新版本 | | `Firefox > 20` | 指定瀏覽器的版本范圍 | | `not ie <=8` | 方向排除部分版本 | | `Firefox 12.1` | 指定瀏覽器的兼容到指定版本 | | `unreleased versions` | 所有瀏覽器的beta測試版本 | | `unreleased Chrome versions` | 指定瀏覽器的測試版本 | | `since 2013` | 2013年之后發布的所有版本 | ## 驗證 browserslist 那么我們如何知道這個配置都兼容是什么，官方也提供了查詢。 例如我們有如下配置： ~~~json "browserslist": [ ">0.2%", "not dead", "not op_mini all" ] ~~~ 然后運行： ~~~bash npx browserslist # 打印出所有瀏覽器版本支出情況， ~~~ 這個配置的大概意思： * `>0.2%`：擁有至少 0.2% 全球市場份額的所有瀏覽器 * `not dead`：排除過去 24 個月內沒有官方支持的瀏覽器 * `not op_mini all`排除 Opera Mini 瀏覽器 有興趣的可以查看。[官網文檔](https://github.com/browserslist/browserslist) # Refs [重新認識caniuse](https://zhuanlan.zhihu.com/p/59270927) [前端工程基礎知識點--Browserslist (基于官方文檔翻譯）](https://juejin.im/post/5b8cff326fb9a019fd1474d6) https://www.jianshu.com/p/bd9cb7861b85