简要了解browserslist

Mzz
239 阅读4分钟

github地址：github.com/browserslis…

作用

在不同的前端工具之间，共享目标浏览器和Node.js版本的配置。开发人员可根据其考虑不同浏览器的兼容性，以在打包时在CSS、JS、HTML等地方进行适配。

常用于以下工具：

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

使用方法

在项目的package.json中配置或者在项目中新建一个.browserslistrc文件进行配置，完成这些配置后，支持browserslistrc的工具会自动找到目标的浏览器。

package.json配置
  "browserslist": [
    "defaults and fully supports es6-module",
    "maintained node versions"
  ]
.browserslistrc配置
# Browsers that we support

defaults and fully supports es6-module
maintained node versions
快捷配置
  "browserslist": [
    "defaults"
  ]
  • 这是一个默认的查询，可以满足大多数用户的配置要求。
 "browserslist": [
    "last 2 versions",
    "not dead",
    "> 0.2%"
  ]
  • 这是一个较为常用的配置。
  • 浏览器要求：最近的两个版本，24个月内有官方支持或更新，使用率超过0.2%。
不同项目环境配置
  • package.json配置
  "browserslist": {
    "production": [
      "> 1%",
      "not dead"
    ],
    "modern": [
      "last 1 chrome version",
      "last 1 firefox version"
    ],
    "ssr": [
      "node 12"
    ]
  }
  • .browserslistrc中配置
[production]
> 1%
not dead

[modern]
last 1 chrome version
last 1 firefox version

[ssr]
node 12

查询

查询来源

Browserslist将会使用浏览器和Node.js的版本从以下的来源查询：

  • 当前目录或者父目录下的.browserslistrc配置文件。
  • 当前目录或者父目录下的package.json文件中的browserslist关键字。
  • 当前目录或父目录中的browserslist配置文件。
  • BROWSERSLIST环境变量。
  • 如果通过以上的方法都没能得到有效的结果，Browserslist会使用默认值："> 0.5%, last 2 versions, Firefox ESR, not dead"。
查询组合
  • or或者，，并集查询
  • and，交集查询
  • not，非查询
如何查询

在项目目录中执行以下命令，可以列出自己设置的查询条件所选择的那些浏览器。

npx browserslist
完整的查询列表

可以通过以下的查询来指定浏览器和Node.js的版本，其中，不区分大小写。

  • defaults，一般等价于以下配置> 0.5%, last 2 versions, Firefox ESR, not dead

  • 根据使用的情况来统计查询

    • > 5%，根据全球的使用统计来选择浏览器的版本，这里表示使用率超过5%的浏览器版本。这里可以使用 <、>=、<=来进行选择。
    • > 5% in US，使用指定国家的统计数据，这里接收两个字母的国家代码。
    • cover 99.5%，选择最流行的浏览器。

  • 最近的版本

    • last 2 versions，选择每个浏览器的最近两个版本。
    • last 2 Chrome versions，选择Chrome浏览器的最近两个版本。
    • last 2 major versions，选择最后两个主要的版本，包括其中的小版本和补丁。

  • 活跃度

    • dead，在24个月内没有官方的支持或更新的浏览器。一般使用not dead来选择那些较为活跃的浏览器。
    • Browserslist官方最近给出的是：IE 11、IE_Mob 11、BlackBerry 10、BlackBerry 7、Samsung 4、OperaMobile 12.1以及Baidu的所有版本。

  • Node.js版本：

    • node 10，选择最新的Node.js 10.x.x版本。
    • last 2 node (major) versions，选择最新的Node.js（主）版本。
    • current node，当前Browserslist使用的Node.js版本。
    • maintained node versions，所有Node.js团队维护的版本。

  • 浏览器版本：

    • iOS 7，指定iOS浏览器的第七个版本。
    • Firefor > 20，Firefox浏览器高于20的版本。
    • ie 6-8，选择版本6到版本8的ie浏览器。

  • 时间

    • since 2015，选择2015年后的版本。
    • last 2 years，选择最近两年的版本。

Browserslist解析

主要通过parse.js部分的内容来观察Browserslist如何通过配置解析。

var AND_REGEXP = /^\s+and\s+(.*)/i
var OR_REGEXP = /^(?:,\s*|\s+or\s+)(.*)/i
  • 关于匹配查询and、or、,关键词的正则表达式。
function flatten(array) {
  if (!Array.isArray(array)) return [array]
  return array.reduce(function (a, b) {
    return a.concat(flatten(b))
  }, [])
}
  • 如果传入的参数不是数组，则封装为一个数组。
  • 如果传入的数组中嵌套了数组，则将其展平为一维数组。
function find(string, predicate) {
  for (var n = 1, max = string.length; n <= max; n++) {
    var parsed = string.substr(-n, n)
    if (predicate(parsed, n, max)) {
      return string.slice(0, -n)
    }
  }
  return ''
}
  • 从字符串末尾逐步截取字符串，找到符合的字符串则返回
function matchQuery(all, query) {
  var node = { query: query }
  if (query.indexOf('not ') === 0) {
    node.not = true
    query = query.slice(4)
  }

  for (var name in all) {
    var type = all[name]
    var match = query.match(type.regexp)
    if (match) {
      node.type = name
      for (var i = 0; i < type.matches.length; i++) {
        node[type.matches[i]] = match[i + 1]
      }
      return node
    }
  }

  node.type = 'unknown'
  return node
}
  • 查看字符串是否以not开头。
  • 尝试遍历所有的类型，匹配成功，则设置node节点的信息，如名称、版本号、浏览器名称。
  • 若没能找到类型，则type设置为unknown。
function matchBlock(all, string, qs) {
  var node
  return find(string, function (parsed, n, max) {
    if (AND_REGEXP.test(parsed)) {
      node = matchQuery(all, parsed.match(AND_REGEXP)[1])
      node.compose = 'and'
      qs.unshift(node)
      return true
    } else if (OR_REGEXP.test(parsed)) {
      node = matchQuery(all, parsed.match(OR_REGEXP)[1])
      node.compose = 'or'
      qs.unshift(node)
      return true
    } else if (n === max) {
      node = matchQuery(all, parsed.trim())
      node.compose = 'or'
      qs.unshift(node)
      return true
    }
    return false
  })
}
  • 回调函数中，若符合and或or的匹配规则，则使用截取的字符串调用matchQuery去匹配查询规则。
  • 若是末尾部分，则无需截取，直接调用matchQuery。
module.exports = function parse(all, queries) {
  if (!Array.isArray(queries)) queries = [queries]
  return flatten(
    queries.map(function (block) {
      var qs = []
      do {
        block = matchBlock(all, block, qs)
      } while (block)
      return qs
    })
  )
}
  • 将浏览器的查询规则转换为一个查询节点的一维数组，以便于Browserslist后续的浏览器兼容性检查。
avatar
文章
阅读
粉丝