一、什么是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 文件纳入版本管理中,以便于团队合作和持续维护。