您的位置:

深入浅出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 文件纳入版本管理中,以便于团队合作和持续维护。