Browserslist那些事儿

542 阅读1分钟

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-liteCan I use网站的数据来查询浏览器版本范围。

browserslist在线体验、练习网站:browsersl.ist/#

在当前目录下查询目标浏览器 npx browserslist

image.png

不同环境的配置

可以为不同的环境配置不同的浏览器查询条件。 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