首页>编程相关>其他源码
下载

browserslist

在不同前端工具之间共享目标浏览器和node.js版本的配置。它用于以下方式：

  • AutopReFixer
  • 别贝
  • Postcss-preset-env
  • Eslint-Plugin-Compat
  • Stylelint-No-Unsupported-browser-teatures
  • PostCSS符合性
  • 过时的webpack-plugin

当您将以下内容添加到package.json ： 

  "browserslist" : [
    " defaults and fully supports es6-module " ,
    " maintained node versions "
  ]

或In .browserslistrc config： 

 # Browsers that we support

defaults and fully supports es6-module
maintained node versions

开发人员使用last 2 versions之类的查询设置其版本列表，以便手动不使用更新版本。 Browserslist将使用caniuse-lite与我可以在此查询中使用数据。

您可以在我们的操场上检查配置的工作方式： browsersl.ist

目录

  • 工具
  • 最佳实践
  • 查询
  • 配置文件
  • 可共享配置
  • 为不同的环境配置
  • 自定义使用数据
  • JS API
  • 环境变量
  • 缓存
  • 安全联系
  • 对于企业

赞助商

Browserslist需要您的支持。我们正在公开集体接受捐款。

> .5% or last 2 versions
> .5%, last 2 versions and组合
（路口） > .5% and last 2 versions not组合
（相对补充）这三个相当于彼此：
> .5% and not last 2 versions
> .5% or not last 2 versions
> .5%, not last 2 versions

测试查询的一种快速方法是在您的终端中执行npx browserslist '> 0.3%, not dead' 。

完整列表

您可以通过查询（案例不敏感）指定浏览器和node.js版本：

  • defaults ：BrowserSlist的默认浏览器（ > 0.5%, last 2 versions, Firefox ESR, not dead ）。
  • 根据使用统计：
    • > 5% ：根据全球使用统计信息选择的浏览器版本。 >= ， < and <=也工作。
    • > 5% in US ：使用美国使用统计。它接受两个字母的国家代码。
    • > 5% in alt-AS ：使用亚洲地区使用统计。所有区域代码的列表均可在caniuse-lite/data/regions找到。
    • > 5% in my stats ：使用自定义使用数据。
    • > 5% in browserslist-config-mycompany stats ：使用browserslist-config-mycompany/browserslist-stats.json的自定义用法数据。
    • cover 99.5% ：提供覆盖范围的最受欢迎的浏览器。
    • cover 99.5% in US ：与上面相同，并使用两个字母的国家代码。
    • cover 99.5% in my stats ：使用自定义使用数据。
  • 最后版本：
    • last 2 versions ：每个浏览器的最后2个版本。
    • last 2 Chrome versions ：Chrome浏览器的最后两个版本。
    • last 2 major versions或last 2 iOS major versions ：最后两个主要版本的所有次要/补丁版本。
  • dead ：24个月内没有官方支持或更新的浏览器。现在是IE 11 ， IE_Mob 11 ， BlackBerry 10 ， BlackBerry 7 ， Samsung 4 ， OperaMobile 12.1和所有版本的Baidu 。
  • node.js版本：
    • node 10和node 10.4 ：选择最新的node.js 10.xx或10.4.x版本。
    • last 2 node versions ：选择2个最新node.js版本。
    • last 2 node major versions ：选择2个最新的主要node.js版本。
    • current node ：browserslist使用的node.js版本。
    • maintained node versions ：所有Node.js版本，这些版本仍由Node.js Foundation维护。
  • 浏览器版本：
    • iOS 7 ：iOS浏览器版本7。请注意， op_mini具有特殊版本all
    • Firefox > 20 ：Firefox版本的新版本大于20。 >= ， < and <=也有效。它还可以与Node.js一起使用。
    • ie 6-8 ：选择包含在内的版本。
    • Firefox ESR ：最新的Firefox扩展支持版本。
    • PhantomJS 2.1和PhantomJS 1.9 ：选择类似于Phantomjs运行时的Safari版本。
  • extends browserslist-config-mycompany ：从browserslist-config-mycompany NPM软件包中获取查询。
  • 通过浏览器支持：
    在这些示例查询中， es6和es6-module是我可以使用页面的URL的feat参数。所有可用功能的列表可以在caniuse-lite/data/features上找到。
    • fully supports es6 ：浏览器具有全面支持的特定功能。例如， fully supports css-grid将省略Edge 12-15，因为这些浏览器版本被标记为具有部分支持。
    • partially supports es6-module或supports es6-module ：具有全面或部分支持特定功能的浏览器。例如， partially supports css-grid将包括Edge 12-15支持，因为这些浏览器版本被标记为具有部分支持。
  • browserslist config ：在浏览器列表配置中定义的浏览器。在差分服务中有用，可修改用户的配置，例如browserslist config and fully supports es6-module 。
  • since 2015或last 2 years以来：自2015年以来发布的所有版本（也是since 2015-03 ， since 2015-03-10 ）。
  • unreleased versions或未unreleased Chrome versions ：Alpha和Beta版本。
  • not ie <= 8 ：排除IE 8，从以前的查询中较低。

您可以not任何查询。

语法定义

关于查询语法有语法规范，如果您实现解析器或其他内容，这可能会有所帮助。

调试

在项目目录中运行npx browserslist ，以查看您的查询选择了哪些浏览器。 

$ npx browserslist
and_chr 61
and_ff 56
and_qq 1.2
and_uc 11.4
android 56
baidu 7.12
bb 10
chrome 62
edge 16
firefox 56
ios_saf 11
opera 48
safari 11
samsung 5

浏览器

下表将浏览器名称及其目标设备映射到BrowserSlist使用的标识符中。

浏览器名称桌面安卓ios其他手机
Android（WebView） Android
百度Baidu
黑莓BlackBerry bb
铬合金Chrome ChromeAndroid and_chr ios_saf​
边缘Edge ↪︎ and_chr ios_saf​
电子Electron
Firefox Firefox ff FirefoxAndroid and_ff ios_saf​
Internet Explorer Explorer ie ie_mob
node.js Node
Kaios浏览器kaios
歌剧Opera op_mob 1 ios_saf​
歌剧迷你3 OperaMini op_mini
QQ浏览器and_qq
野生动物园Safari iOS ios_saf
三星互联网Samsung
UC浏览器UCAndroid and_uc
  • ↪︎ name意味着浏览器使用按name捕获的相同引擎
  • 1个Opera Mobile≈ChromeAndroid
  • 2所有iOS浏览器使用WebKit
  • 3 Opera Mini具有2种“极端”模式和“高”，以节省数据。 op_mini目标是“极端”。 “高”与普通的歌剧手机兼容。

配置文件

package.json

如果要减少项目root中的配置文件，则可以在package.json中指定带有browserslist键的浏览器： 

{
  "private" : true ,
  "dependencies" : {
    "autoprefixer" : " ^6.5.4 "
  },
  "browserslist" : [
    " last 1 version " ,
    " > 1% " ,
    " not dead "
  ]
}

.browserslistrc

分离的浏览列表配置应命名为.browserslistrc ，并让浏览器查询由新行分开。每条线与or组合仪结合使用。评论以#符号开头： 

 # Browsers that we support

last 1 version
> 1%
not dead # no browsers without security updates

BrowserSlist将在path中的每个目录中检查配置。因此，如果工具过程app/styles/main.css ，则可以将配置放在root， app/或app/styles上。

您可以在BROWSERSLIST_CONFIG环境变量中指定直接路径。

可共享配置

您可以使用以下查询从另一个软件包中引用导出的浏览器列表配置： 

  "browserslist" : [
    " extends browserslist-config-mycompany "
  ]

出于安全原因，外部配置仅支持具有browserslist-config-前缀的软件包。还支持NPM示波器软件包，通过命名或以@scope/browserslist-config命名或前缀模块，例如@scope/browserslist-config或@scope/browserslist-config-mycompany 。

如果您不接受用户的浏览列表查询，则可以使用或使用或BROWSERSLIST_DANGEROUS_EXTEND Environment变量禁用验证。 

BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack

因为这使用了npm的分辨率，所以您还可以在软件包中引用特定文件： 

  "browserslist" : [
    " extends browserslist-config-mycompany/desktop " ,
    " extends browserslist-config-mycompany/mobile "
  ]

编写共享浏览器列表软件包时，只需导出一个数组。 browserslist-config-mycompany/index.js ： 

 module . exports = [
  'last 1 version' ,
  '> 1%' ,
  'not dead'
]

您还可以将browserslist-stats.json文件作为您共享配置的一部分，并> 5% in browserslist-config-mycompany stats进行查询。它使用与extends格式相同的格式和上述dangerousExtend属性。

您可以为不同环境导出配置，并通过BROWSERSLIST_ENV或工具中的env选项选择环境： 

 module . exports = {
  development : [
    'last 1 version'
  ] ,
  production : [
    'last 1 version' ,
    '> 1%' ,
    'not dead'
  ]
}

为不同的环境配置

您还可以针对各种环境指定不同的浏览器查询。 BrowserSlist将根据BROWSERSLIST_ENV或NODE_ENV变量选择查询。如果没有声明它们，浏览器列表将首先查找production查询，然后使用默认值。

在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-ga将询问Google Analytics（分析），然后生成browserslist-stats.json ： 

 npx browserslist-ga

或者，您可以使用browserslist-ga-export转换Google Analytics（分析）数据，而无需为Google帐户提供密码。

您可以通过任何其他方法生成用法统计文件。文件格式应该是： 

 {
  "ie" : {
    "6" : 0.01 ,
    "7" : 0.4 ,
    "8" : 1.5
  } ,
  "chrome" : {
    …
  } ,
  …
}

请注意，您可以根据自定义使用数据查询，同时还可以对全球或区域数据进行查询。例如， > 1% in my stats, > 5% in US, 10% 。

JS API 

 const browserslist = require ( 'browserslist' )

// Your CSS/JS build tool code
function process ( source , opts ) {
  const browsers = browserslist ( opts . overrideBrowserslist , {
    stats : opts . stats ,
    path :  opts . file ,
    env :   opts . env
  } )
  // Your code to add features for selected browsers
}

查询可以是字符串"> 1%, not dead"或数组['> 1%', 'not dead'] 。

如果缺少查询，浏览器列表将寻找配置文件。您可以提供一个path选项（可以是文件），以相对地找到配置文件。

选项：

  • path ：文件或目录路径查找配置文件。默认为. 。
  • env ：从配置中使用了哪些环境部分。默认是production 。
  • stats ：自定义使用统计数据。
  • config ：如果要手动设置配置路径。
  • ignoreUnknownVersions ：不要直接查询（例如ie 12 ）。默认值为false 。
  • dangerousExtend ：禁用安全检查是否extend查询。默认值为false 。
  • throwOnMissing ：如果找不到ENV，请丢弃错误。默认值为false 。
  • mobileToDesktop ：如果可以使用桌面浏览器，请使用有关此移动版本的数据。我可以使用有关最新版本的移动浏览器的数据。默认情况下， last 2 and_ff versions返回and_ff 90并且使用此选项返回and_ff 91, and_ff 90 。此选项可能会导致未知的浏览器版本错误（例如，我可以使用and_ff 91的数据）。默认值为false 。

对于非JS环境和调试目的，您可以使用CLI工具： 

browserslist " > 1%, not dead "

您可以通过JS API获得所选浏览器的总用户覆盖范围： 

 browserslist . coverage ( browserslist ( '> 1%' ) )
//=> 81.4 
 browserslist . coverage ( browserslist ( '> 1% in US' ) , 'US' )
//=> 83.1 
 browserslist . coverage ( browserslist ( '> 1% in my stats' ) , 'my stats' )
//=> 83.1 
 browserslist . coverage ( browserslist ( '> 1% in my stats' , { stats } ) , stats )
//=> 82.2

或通过CLI： 

$ browserslist --coverage " > 1% "
These browsers account for 81.4% of all users globally
$ browserslist --coverage=US " > 1% in US "
These browsers account for 83.1% of all users in the US
$ browserslist --coverage " > 1% in my stats "
These browsers account for 83.1% of all users in custom statistics
$ browserslist --coverage " > 1% in my stats " --stats=./stats.json
These browsers account for 83.1% of all users in custom statistics

环境变量

如果工具在内部使用浏览器列表，则可以使用环境变量更改浏览器列表设置：

  • 带有浏览器查询的BROWSERSLIST 。 

    BROWSERSLIST= " > 5% " npx webpack

  • BROWSERSLIST_CONFIG带有config文件的路径。 

    BROWSERSLIST_CONFIG=./config/browserslist npx webpack

  • 带有环境字符串的BROWSERSLIST_ENV 。 

    BROWSERSLIST_ENV= " development " npx webpack

  • BROWSERSLIST_STATS具有自定义使用数据的路径， > 1% in my stats 。 

    BROWSERSLIST_STATS=./config/usage_data.json npx webpack

  • BROWSERSLIST_DISABLE_CACHE如果要禁用config读取缓存。 

    BROWSERSLIST_DISABLE_CACHE=1 npx webpack

  • BROWSERSLIST_DANGEROUS_EXTEND禁用安全共享配置名称检查。 

    BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack

  • BROWSERSLIST_ROOT_PATH以防止在此路径上方读取文件。 

    BROWSERSLIST_ROOT_PATH=. npx webpack

browserslist.coverage()

返回浏览器市场覆盖范围。 

 const browsers = browserslist ( '> 1% in US' )
browserslist . coverage ( browsers , 'US' ) //=> 83.1

browserslist.loadConfig()

它就像调用browserslist() ，但它返回config的查询，而不是浏览器。 

 browserslist . loadConfig ( { file : process . cwd ( ) } ) ?? browserslist . defaults

browserslist.defaults

带有默认查询的数组。

缓存

browserslist在托管过程的持续时间内浏览了它从package.json和browserslist文件中读取的配置，以及有关文件存在的知识。

要清除这些缓存，请使用： 

 browserslist . clearCaches ( )

要完全禁用缓存，请设置BROWSERSLIST_DISABLE_CACHE环境变量。

安全联系

要报告安全漏洞，请使用Tidelift安全联系人。 Tidelift将协调修复和披露。

对于企业

作为Tidelift订阅的一部分可用。

browserslist和其他成千上万的软件包的维护人员正在与Tidelift合作，为您用于构建应用程序的开源依赖关系提供商业支持和维护。节省时间，降低风险并改善代码健康，同时支付您使用的确切依赖项的维护者。了解更多。

浏览数据更新

请参阅update-browserslist-db文档

展开
附加信息
相关应用
为您推荐
相关资讯 全部