深入淺出browserlist

一、什麼是browserlist

在開發中，為了讓代碼能夠在不同的瀏覽器中運行，程序員們需要寫很多瀏覽器兼容代碼。而browserlist提供一種簡單的方式來管理和自動化處理不同瀏覽器的需求。

Browserlist 是一種工具，它是一份定義 browser targets 的字符串列表。這些列表可以支持的瀏覽器名稱（Chrome），版本（70.2），或我想要支持的特定平台（iOS >= 7）。

二、browserlist的安裝和使用

通過 npm 將 browserlist 安裝到項目中:

npm install --save-dev browserlist

或者全局安裝:

npm install --global browserlist

安裝完成後，在項目根目錄新建一個 .browserlistrc 文件，裏面包含了需要兼容的瀏覽器列表信息。例如：

last 2 versions
not dead

以上的設置表明需要兼容最新的兩個版本的瀏覽器，但不包括已經停止維護的瀏覽器。

在 gulpfile.js 或者 webpack.config.js 或者其他構建工具的配置文件中，通過引用 browserlist-config 插件來獲取瀏覽器列表。例如：

const config = require('browserlist-config')();

這個插件可以自動查找 .browserlistrc 文件並返回一個對象數組。然後，你可以使用這個 config 數組來配置其他依賴 browser 的工具（例如 Autoprefix）等等。

三、browserlist的語法和規則

Browserlist 定義了一些規則和關鍵字來方便你控制瀏覽器列表。以下是其基本的使用方法：

1. 瀏覽器名稱

瀏覽器名詞需要是一個能被辨認的瀏覽器名稱。例如：

amp
and_chr
and_ff
and_qq
and_uc
android
baidu
bb
bb 10
chrome
chrome_android
edge
edge_mob
firefox
firefox_android
ie
ie_mob
ios_saf
kaios
op_mini
op_mob
opera
opera_android
safari
samsung
vivaldi

2. 版本號

可以指定瀏覽器的版本號，例如：

chrome > 80        //支持80版本以上的chrome瀏覽器
ios_saf <= 12.0     //不支持iOS 12.0以上版本的 Safari 瀏覽器

3. 邏輯運算符

可以使用邏輯運算符 and 和 or 來組合多個瀏覽器：

opera > 30 and firefox >= 20   //要求 Opera 在 30 版本以上且 Firefox 至少在 20 版本以上
chrome >= 70 or safari >= 11.1 //要求 Chrome 在 70 版本以上或 Safari 在 11.1 版本以上

4. Mixins

除了使用指定具體的瀏覽器和版本號，可以使用 mixins 來方便地指定更多範圍：

defaults   //默認值，支持所有瀏覽器
not ie <= 8 //除了IE8及以下版本之外的所有瀏覽器
last 2 versions   //最近兩個版本的瀏覽器

四、如何在相關工具中使用browserlist

通過browserlist，你可以在很多構建工具中進行瀏覽器兼容性處理，例如 gulp、grunt、Webpack、Babel、PostCSS、Autoprefixer等等。

以Webpack為例，當你引入babel-loader和@babel/preset-env 插件後，根據你的瀏覽器列表，js代碼會被自動轉化成可以被目標瀏覽器正確解析的代碼：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    browsers: [
                      '> 1%',
                      'last 2 versions',
                      'not ie <= 8'
                    ]
                  }
                }
              ]
            ]
          }
        }
      }
    ]
  }
};

五、小結

Browserlist給前端開發帶來了很多便捷性。通過可讀性高、簡單的語法規則，能夠很好地維護和管理不同瀏覽器的需求。在實際項目中，推薦將 .browserlistrc 文件納入版本管理中，以便於團隊合作和持續維護。