关于前端:认识-browserslist

7次阅读

共计 2498 个字符，预计需要花费 7 分钟才能阅读完成。

browserslist 定义了一套浏览器兼容配置规范，能够让泛滥前端开发工具之间能够共享一套配置。

反对的前端开发工具列表：

Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
obsolete-webpack-plugin

browserslit-ga 和 browserslist-ga-export：该工具能生成拜访你经营的网站的浏览器的版本散布数据，以便用于相似 0.5% in my stats 查问条件，前提是你经营的网站部署有 Google Analytics。
browserslist-useragent-regexp：将 browserslist 查问编译为 regexp 以测试浏览器 useragent。能够用于展现“暂不反对你的浏览器”等信息。
browserslist-useragent-ruby：性能同上，是一个 Ruby 库。
caniuse-api：申请 caniuse 数据查看浏览器的兼容性。
npx browserslist：在前端工程目录下运行此命令，能够输入以后工程的指标浏览器列表。

其余的工具介绍能够查看官网文档

工具本身的配置，例如 Autoprefixer 工具配置中的 browsers 属性
当前目录或者下级目录的 package.json 配置文件外面的 browserslist 配置项（举荐）
当前目录或者下级目录的 .browserslistrc 配置文件
当前目录或者下级目录的 browserslist 配置文件
BROWSERSLIST 环境变量
如果以上配置均不能提供一个无效的配置，browserslist 将采纳默认配置：> 0.5%, last 2 versions, Firefox ESR, not dead

// package.json
// 默认配置：> 0.5%, last 2 versions, Firefox ESR, not dead
"browserslist": ["defaults"]

browserslist 能够通过 BROWSERSLIST_ENV 或者 NODE_ENV 抉择应用哪些配置，如果这两个环境变量都没指定，那就首先看一下有没有 production 这个环境配置，如果 production 环境也没有，就间接应用 defaults 配置。

例如 package.json 中：

  "browserslist": {
    "production": [
      "> 1%",
      "ie 10"
    ],
    "modern": [
      "last 1 chrome version",
      "last 1 firefox version"
    ],
    "ssr": ["node 12"]
  }

在 .browserslistrc 中：

[production]
> 1%
ie 10

[modern]
last 1 chrome version
last 1 firefox version

[ssr]
node 12

browserslist 的配置内容能够了解为一个查问汇合，依据这个汇合来定制咱们我的项目的兼容范畴

defaults：默认反对的浏览器 (> 0.5%, last 2 versions, Firefox ESR, not dead)
统计范畴相干
- > 5%：兼容寰球浏览器应用数量占比 5% 以上的类型。数值能够依据理论场景自定义，同理，除了 > 也反对 >=、<、<=。
- > 5% in US：指定国家使用率笼罩（双字母形成，例如 CH、JP 等等）
- > 5% in alt-AS：指定大洲的应用覆盖率（双字母后缀，例如 alt-af、alt-as 等等）
- > 5% in my stats：本人网站的应用覆盖率，须要联合 browserslist-ga-export
- cover 99.5%：笼罩寰球 99.5% 的浏览器类型，即反对绝大多数的古代浏览器。
- cover 99.5% in US：与后面同理。
- cover 99.5% in my stats：与后面同理。
最近版本
- last 2 versions：每个浏览器反对的最新 2 个版本
- last 2 Chrome versions：Chrome 浏览器反对的最新 2 个版本
- last 2 major versions：每个浏览器反对的最新 2 个主分支版本
Node 版本
- maintained node versions：兼容所有仍被反对的 NODE 版本
- node 10 and node 10.4：兼容 10.x.x 或 10.4.x 版本
- current node：兼容以后环境下的 NODE 版本
浏览器版本
- ie 6-8：设置兼容 IE 版本范畴
- not ie <= 8：设置不反对的 IE 版本范畴
- Firefox > 20：设置火狐的版本范畴，同理也反对 >=、< 及 <=。
- Firefox ESR：火狐缩短反对板的最新版本
- iOS 7：设置反对的 iOS 7 浏览器版本
last 2 years：最近 2 年公布的浏览器版本
since 2015：自 2015 年公布的浏览器版本
unreleased versions 或 unreleased Chrome versions：alpha 和 beta 版本
extends browserslist-config-mycompany：从 browserslist-config-mycompany 中继承配置。
dead：一年内未被官网保护更新的版本，到当初为止是 IE 11, IE_Mob 11, BlackBerry 10, BlackBerry 7, Samsung 4, OperaMobile 12.1 和所有版本的 Baidu