js：Browserslist用特定语句查询浏览器列表的工具与Babel和Postcss配置使用

Browserslist

Browserslist 是一个用特定语句查询浏览器列表的工具

文档

• https://www.npmjs.com/package/browserslist
• https://github.com/browserslist/browserslist#full-list

安装

pnpm install --save-dev browserslist

使用示例

$ npx browserslist "last 2 Chrome versions" chrome 119
chrome 118

Babel 和 Browserslist

文档

• https://babeljs.io/

有如下代码，需要通过babel转译为兼容浏览器的代码

src/index.js

const say = (msg) => {console.log(msg);
};
say("hello");

安装 babel依赖

pnpm install --save-dev @babel/core @babel/cli @babel/preset-env

在 package.json 中配置babel

{"babel": {"presets": ["@babel/preset-env"]}
}

运行

$ npx babel ./src/index.js --out-dir dist

输出

"use strict";var say = function say(msg) {console.log(msg);
};
say("hello");

在 package.json 中增加browserslist 配置

{"babel": {"presets": ["@babel/preset-env"]},"browserslist": ["chrome 119"]
}

运行

$ npx babel ./src/index.js --out-dir dist

输出

"use strict";const say = msg => {console.log(msg);
};
say("hello");

比对两次输出，将浏览器兼容范围减小后，代码直接就是箭头函数

Postcss 和 Browserslist

使用postcss自动添加css的浏览器前缀

文档

• https://github.com/postcss/postcss-load-config
• https://github.com/postcss/postcss-cli

安装

$ pnpm i -D postcss postcss-cli autoprefixer

在 package.json 中 配置 postcss

{"postcss": {"map": false,"plugins": {"autoprefixer": {}}}
}

src/style.css

.box {box-sizing: border-box;
}

不配置browserslist的情况下

运行命令

$ npx postcss ./src/style.css -o dist/style.css

生成

.box {box-sizing: border-box;
}

package.json 配置browserslist

{"browserslist": ["cover 99.5%"],
}

运行命令

$ npx postcss ./src/style.css -o dist/style.css

输出

.box {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}

推荐配置

Browserslist 将依赖BROWSERSLIST_ENV 或者 NODE_ENV

{"browserslist": {"production": ["> 1%","last 2 version"],"development": ["last 1 chrome version","last 1 firefox version"]}
}

• > 1% 全球市场占有率大于 1% 的浏览器
• last 2 version 所有浏览器的最后 2 个版本
• last 1 chrome version 查找 Chrome 浏览器的最后 1 个版本

完整配置 package.json

{"type": "module","dependencies": {},"devDependencies": {"browserslist": "^4.22.1","@babel/cli": "^7.23.0","@babel/core": "^7.23.2","@babel/preset-env": "^7.23.2","autoprefixer": "^10.4.16","postcss": "^8.4.31","postcss-cli": "^10.1.0","postcss-preset-env": "^9.3.0"},"browserslist": {"production": ["> 1%","last 2 version"],"development": ["last 1 chrome version","last 1 firefox version"]},"babel": {"presets": ["@babel/preset-env"]},"postcss": {"map": false,"plugins": {"autoprefixer": {}}}
}

参考文章

• browserslist 是什么？看这篇就够了
• 前端工程基础知识点–Browserslist (基于官方文档翻译）