乐趣区

关于前端:认识-browserslist

jiezi

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

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

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

browserslist 相干工具

  • 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：在前端工程目录下运行此命令，能够输入以后工程的指标浏览器列表。

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

browserslist 配置文件和查问程序

  1. 工具本身的配置，例如 Autoprefixer 工具配置中的 browsers 属性
  2. 当前目录或者下级目录的 package.json 配置文件外面的 browserslist 配置项（举荐）
  3. 当前目录或者下级目录的 .browserslistrc 配置文件
  4. 当前目录或者下级目录的 browserslist 配置文件
  5. BROWSERSLIST 环境变量
  6. 如果以上配置均不能提供一个无效的配置，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

在所有的查问条件前都能够增加 not 取非，例如 not dead。并且条件能够进行汇合操作，通过 or 或 , 进行并集操作，通过 and 进行交加操作，not 去非蕴含关系汇合。具体查问组合成果能够查看官网文档

笔者在某教育公司的第 5 波裁员中拿到 N+1，当初筹备求职中，如果贵司有前端相干职位正在招聘，烦请分割笔者，请注明来意哈，感激浏览。

  • wx: qiqihaobenben
  • emial: chenfangxu_qixin@163.com
  • github: https://github.com/qiqihaobenben
退出移动版