我们的项目需要兼容哪些主流浏览器的哪些版本,那么我们怎么知道哪些版本是主流的呢?这里就推荐一个网站。 官网地址🌏
打开Browser Usage table
如下就是各种浏览器各个版本的市场占有率。
找到node_modules中的browserslist(这是我们安装webpack后就装上的包)
这里的这句话就是在向can i use
的网站发送请求
var agents = require('caniuse-lite/dist/unpacker/agents').agents
对于Mac系统的电脑可以在npx browserslist 后面添加条件。如下条件为市场使用率大于1%,或者最新的两个版本。只要符合一个条件就会输出。
windows的电脑没有办法添加条件。
可以去修改 package.json的配置
在package.json中添加browserslist,就会读取配置。我们可以把最近两个版本改成最近四个版本,然后 npx browserslist
执行看一看区别
{
"name": "webpack_emo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development"
},
"repository": {
"type": "git",
"url": "git@gitee.com:yang-yiming1234/webpack_emo.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"style-loader": "^3.3.1",
"webpack": "^5.73.0"
},
"devDependencies": {
"css-loader": "^6.7.1",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
},
"browserslist":[
">1%",
"last 4 version",
"not dead"
]
}
如下可以看到四个版本
在根目录中新建 .browserslistrc文件添加配置
>1%
last 2 verions
not dead