在使用脚手架搭建项目时,会自动生成.browserslistrc文件,该文件主要是 配置兼容浏览器
.browserslistrc 是在不同的前端工具之间共用目标浏览器和 node 版本的配置文件。 它主要被以下工具使用:
Autoprefixer
Babel
post-preset-env
eslint-plugin-compat
stylelint-unsupported-browser-features
postcss-normalize
配置方法
1、在package.json中配置
{
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
}
2、也可在.browserslistrc中配置
# 注释是这样写的,以#号开头
last 1 version #最后的一个版本
> 1% #代表全球超过1%使用的浏览器
maintained node versions #所有还被 node 基金会维护的 node 版本
not dead
对于部分配置参数做一些解释:
" >1%" :代表着全球超过1%人使用的浏览器
“last 2 versions” : 表示所有浏览器兼容到最后两个版本
“not ie <=8” :表示IE浏览器版本大于8(实则用npx browserslist 跑出来不包含IE9 )
“safari >=7”:表示safari浏览器版本大于等于7\
不配置默认为: > 0.5%, last 2 versions, Firefox ESR, not dead
在当前目录下查询目标浏览器 npx browserslist
查询条件列表
你可以用如下查询条件来限定浏览器和 node 的版本范围(大小写不敏感):
> 5%: 基于全球使用率统计而选择的浏览器版本范围。>=,<,<=同样适用。
> 5% in US : 同上,只是使用地区变为美国。支持两个字母的国家码来指定地区。
> 5% in alt-AS : 同上,只是使用地区变为亚洲所有国家。这里列举了所有的地区码。
> 5% in my stats : 使用定制的浏览器统计数据。
cover 99.5% : 使用率总和为99.5%的浏览器版本,前提是浏览器提供了使用覆盖率。
cover 99.5% in US : 同上,只是限制了地域,支持两个字母的国家码。
cover 99.5% in my stats :使用定制的浏览器统计数据。
maintained node versions :所有还被 node 基金会维护的 node 版本。
node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。
current node :当前被 browserslist 使用的 node 版本。
extends browserslist-config-mycompany :来自browserslist-config-mycompany包的查询设置
ie 6-8 : 选择一个浏览器的版本范围。
Firefox > 20 : 版本高于20的所有火狐浏览器版本。>=,<,<=同样适用。
ios 7 :ios 7自带的浏览器。
Firefox ESR :最新的火狐 ESR(长期支持版) 版本的浏览器。
unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。
last 2 major versions or last 2 ios major versions :最近的两个发行版,包括所有的次版本号和补丁版本号变更的浏览器版本。
since 2015 or last 2 years :自某个时间以来更新的版本(也可以写的更具体since 2015-03或者since 2015-03-10)
dead :通过last 2 versions筛选的浏览器版本中,全球使用率低于0.5%并且官方声明不在维护或者事实上已经两年没有再更新的版本。目前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。
last 2 versions :每个浏览器最近的两个版本。
last 2 Chrome versions :chrome 浏览器最近的两个版本。
defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。
not ie <= 8 : 浏览器范围的取反。
#可以添加not在任和查询条件前面,表示取反
补充:
.browserslistrc 配置文件直接影响到 Babel 在 Vue 或其他基于 Webpack 的前端项目中的行为。Babel 使用这个配置来确定哪些 JavaScript 特性和语法需要被转换为指定浏览器列表支持的形式。
当您在项目中配置了 .browserslistrc,Babel 中使用的 @babel/preset-env 会依据这个文件中定义的浏览器兼容性目标来自动选择需要包含的 polyfill 和转换规则。@babel/preset-env 可以智能地按需转换代码,只引入项目实际使用的现代 JavaScript 特性的polyfills,避免无谓的体积增加。
例如,如果你在 .browserslistrc 中指定了项目需要支持 Internet Explorer 11,那么 Babel 将确保所有不被 IE11 支持的 ECMAScript 新特性(如箭头函数、Promise、async/await 等)都被转换为 IE11 可以理解的语法。
简而言之,.browserslistrc 的配置让 Babel 能够更精确地进行向下兼容的转译工作,确保您的代码在目标浏览器列表中都能顺利运行。