首頁>編程相關>其他源碼
下載

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文檔

展開
附加信息
相關應用
爲您推薦
相關資訊 全部