一、什么是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 文件纳入版本管理中，以便于团队合作和持续维护。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/183535.html
微信扫一扫 
支付宝扫一扫 