browserslistrc是什么
browserslistrc是在不同前端工具之间共享目标浏览器和Node.js版本的配置。
可以为流行的JavaScript工具(如Autoprefixer、Babel、ESLint、PostCSS和Webpack)共享浏览器兼容性配置。
当你在package.json中添加以下内容时,所有工具都会自动找到目标浏览器:
"browserslist": [
"last 2 version",
"> 1%",
"maintained node versions",
"not dead"
]
或者在工程的根目录下存在.browserslistrc配置文件(内容如下):
# 每个浏览器的最后2个版本。
last 1 version
# 全局使用统计选择的浏览器版本。
> 1%
# 所有Node.js版本
maintained node versions
# 不包括24个月内没有官方支持或更新的浏览器。
not dead
开发人员使用last 2 versions之类的查询来设置他们的版本列表,这样就不用手动更新版本了。Browserslist将使用caniuse-lite和Can I use网站的数据来查询浏览器版本范围。
browserslist在线体验、练习网站:browsersl.ist/#
在当前目录下查询目标浏览器 npx browserslist
不同环境的配置
可以为不同的环境配置不同的浏览器查询条件。 Browserslist 将依赖BROWSERSLIST_ENV 或者 NODE_ENV查询浏览器版本范围 。 如果两个环境变量都没有配置正确的查询条件,那么优先从 production 对应的配置项加载查询条件,如果再不行就应用默认配置。
In package.json:
"browserslist": {
"production": [
"> 1%",
"ie 10"
],
"development": [
"last 1 chrome version",
"last 1 firefox version"
]
}
In .browserslistrc config:
[production]
> 1%
not dead
[modern]
last 1 chrome version
last 1 firefox version
[ssr]
node 12