(目录)
Browserslist
Browserslist 是一个用特定语句查询浏览器列表的工具
文档
安装
pnpm install --save-dev browserslist
使用示例
$ npx browserslist "last 2 Chrome versions"
chrome 119
chrome 118
Babel 和 Browserslist
文档
有如下代码，需要通过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的浏览器前缀
文档
安装
$ 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": {}
}
}
}