webpack如何设置兼容浏览器的范围browserslist
Browserslist 是前端工程化不可或缺的工具,无论是处理 js 的 babel 还是处理 css 的 postcss,他们背后都有Browserslist 的身影。
一、如何查看查看所有浏览器和它的市场占有率
我们如何知道现在的浏览器那些被废弃、那些市场占有率高,可以通过下面两个网站提供的数据支撑,Browserslist 也是依据此数据。
caniuse-lite
和 Can I Use
二、如何配置browserslist
使用/常用配置
> 5%: 在全球用户份额大于 5% 的浏览器
last 2 versions: 所有浏览器的最新两个版本
last 2 Chrome versions: Chrome 浏览器的最新两个版本
dead: 官方不在维护已过两年,比如 IE10
not dead: 官方还在维护的
更多配置可在官方文档查看https://browsersl.ist/
我们可以在package.json配置或者单独新建一个.browserslistrc的配置文件
package.json
"browserslist": ["last 2 version", "> 1%", "not dead"]
.browserslistrc文件
>1%
last 2 versions
not dead
配置完成子后控制台运行,就能查看筛选的浏览器
npx browserslist