browserslist
4.24.2
ターゲットブラウザーとnode.jsバージョンを異なるフロントエンドツール間で共有する構成。で使用されます：
すべてのツールでは、 package.jsonに次のものを追加すると、ターゲットブラウザが自動的に見つかります。
"browserslist" : [
" defaults and fully supports es6-module " ,
" maintained node versions "
]または.browserslistrc config：
# Browsers that we support
defaults and fully supports es6-module
maintained node versions開発者は、 last 2 versionsなどのクエリを使用してバージョンリストを設定して、バージョンを手動で更新できません。 BrowserSlistはcaniuse-liteこのクエリにデータを使用できますか？
プレイグラウンドで構成がどのように機能するかを確認できます： browsersl.ist
BrowserSlistにはサポートが必要です。 Open Collectiveでの寄付を受け入れています。
> .5% or last 2 versions> .5%, last 2 versionsandコンバイナー> .5% and last 2 versionsnot> .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% ：グローバル使用統計で選択されたブラウザバージョン。 >= 、 <および<=仕事も。> 5% in US ：USAの使用統計を使用しています。 2文字の国コードを受け入れます。> 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 。上記と同じ、2文字の国コードを使用します。cover 99.5% in my stats ：カスタム使用データを使用します。last 2 versions ：各ブラウザの最後の2つのバージョン。last 2 Chrome versions ：Chromeブラウザの最後の2つのバージョン。last 2 major versionsまたはlast 2 iOS major versions ：最後の2つの主要バージョンのすべてのマイナー/パッチリリース。dead ：24か月間の公式サポートまたは更新のないブラウザ。現在、 IE 11 、 IE_Mob 11 、 BlackBerry 10 、 BlackBerry 7 、 Samsung 4 、 OperaMobile 12.1 、およびBaiduのすべてのバージョンです。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 ：node.jsバージョンは、BrowserSlistが現在使用しています。maintained node versions ：すべてのnode.jsバージョンは、node.jsファンデーションによって維持されています。iOS 7 ：iOSブラウザーバージョン7を直接。 op_miniにはall特別なバージョンがあることに注意してください。<= Firefox > 20 >=も< Firefoxのバージョン。 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 PAGE PAGEのURLのfeatパラメーターです。利用可能なすべての機能のリストはcaniuse-lite/data/featuresにあります。fully supports es6 ：ブラウザを完全にサポートします。たとえば、 fully supports css-grid 。これらのブラウザーバージョンは部分的なサポートがあるとマークされているためです。partially supports es6-moduleか、 supports es6-module ：特定の機能を完全または部分的にサポートするブラウザー。たとえば、 partially supports css-gridは、これらのブラウザーバージョンには部分的なサポートがあるとマークされているため、Edge 12-15サポートが含まれます。browserslist config ：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 。
クエリ構文に関する文法仕様があります。これは、パーサーなどを実装している場合に役立つ場合があります。
Project Directoryで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 | Baidu | |||
| ブラックベリー | BlackBerry bb | |||
| クロム | Chrome | ChromeAndroid and_chr | ios_saf 2 | |
| 角 | Edge | ↪︎ and_chr | ios_saf 2 | |
| 電子 | Electron | |||
| Firefox | Firefox ff | FirefoxAndroid and_ff | ios_saf 2 | |
| インターネットエクスプローラー | Explorer ie | ie_mob | ||
| node.js | Node | |||
| Kaiosブラウザ | kaios | |||
| オペラ | Opera | op_mob 1 | ios_saf 2 | |
| オペラミニ3 | OperaMini op_mini | |||
| QQブラウザ | and_qq | |||
| サファリ | Safari | iOS ios_saf | ||
| サムスンインターネット | Samsung | |||
| UCブラウザ | UCAndroid and_uc |
↪︎ nameブラウザがnameでキャプチャされた同じエンジンを使用することを意味しますop_mini 「極端な」ものをターゲットにします。 「High」は、通常のオペラモバイルと互換性があります。 package.json Project Rootで構成ファイルを削減する場合は、 browserslistキーを使用してpackage.jsonでブラウザを指定できます。
{
"private" : true ,
"dependencies" : {
"autoprefixer" : " ^6.5.4 "
},
"browserslist" : [
" last 1 version " ,
" > 1% " ,
" not dead "
]
}.browserslistrc分離されたBrowserSlist Configには、 .browserslistrcという名前で、新しい行でブラウザクエリを分割する必要があります。各ラインは、 orコンバイナーと組み合わされます。コメントは#シンボルから始まります：
# Browsers that we support
last 1 version
> 1%
not dead # no browsers without security updates BrowserSlistは、 path内のすべてのディレクトリの構成をチェックします。したがって、ツールプロセスapp/styles/main.cssの場合、configをroot、 app/ or app/stylesに配置できます。
BROWSERSLIST_CONFIG環境変数で直接パスを指定できます。
次のクエリを使用して、別のパッケージからエクスポートされたBrowserSlist構成を参照できます。
"browserslist" : [
" extends browserslist-config-mycompany "
]セキュリティ上の理由から、外部構成は、 browserslist-config-プレフィックスを備えたパッケージのみをサポートします。 NPMスコープパッケージも、 @scope/browserslist-config @scope/browserslist-configまたは@scope/browserslist-config-mycompanyをモジュールに名前を付けるかプレフィックスすることによりサポートされています。
ユーザーからのブラウザーリストのクエリを受け入れない場合は、OR BROWSERSLIST_DANGEROUS_EXTEND環境変数を使用して検証を無効にできます。
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpackこれはnpmの解像度を使用しているため、パッケージ内の特定のファイルを参照することもできます。
"browserslist" : [
" extends browserslist-config-mycompany/desktop " ,
" extends browserslist-config-mycompany/mobile "
] Shared BrowserSlistパッケージを作成するときは、配列をエクスポートするだけです。 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変数に従ってクエリを選択します。それらのいずれも宣言されていない場合、BrowserSlistはまずproductionクエリを探し、次にデフォルトを使用します。
package.json ：
"browserslist" : {
"production" : [
"> 1%" ,
"not dead"
] ,
"modern" : [
"last 1 chrome version" ,
"last 1 firefox version"
] ,
"ssr" : [
"node 12"
]
} in .browserslistrc config：
[production]
> 1%
not dead
[modern]
last 1 chrome version
last 1 firefox version
[ssr]
node 12Webサイトがある場合は、サイトの使用統計に対して照会できます。 browserslist-ga Googleアナリティクスへのアクセスを依頼し、 browserslist-stats.jsonを生成します。
npx browserslist-ga
または、Googleアカウントのパスワードを提供せずに、Googleアナリティクスデータを変換するためにbrowserslist-ga-export使用することもできます。
他の方法で使用法統計ファイルを生成できます。ファイル形式は次のようなものでなければなりません：
{
"ie" : {
"6" : 0.01 ,
"7" : 0.4 ,
"8" : 1.5
} ,
"chrome" : {
…
} ,
…
}グローバルまたは地域のデータに対して照会しながら、カスタム使用データに対して照会することができることに注意してください。たとえば、 > 1% in my stats, > 5% in US, 10%クエリが許可されています。
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']にすることができます。
クエリが欠落している場合、BrowserSlistは構成ファイルを探します。 pathオプション（ファイルになることができる）を提供して、構成ファイルを比較的見つけることができます。
オプション：
path ：構成ファイルを探すためのファイルまたはディレクトリパス。デフォルトはです. 。env ：configから使用する環境セクション。デフォルトは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の設定を変更できます。
ブラウザのクエリを備えたBROWSERSLIST 。
BROWSERSLIST= " > 5% " npx webpack構成ファイルへのパスを備えたBROWSERSLIST_CONFIG 。
BROWSERSLIST_CONFIG=./config/browserslist npx webpack環境文字列を備えたBROWSERSLIST_ENV 。
BROWSERSLIST_ENV= " development " npx webpack > 1% in my statsを超えるカスタム使用データへのパスを備えたBROWSERSLIST_STATS 。
BROWSERSLIST_STATS=./config/usage_data.json npx webpack BROWSERSLIST_DISABLE_CACHE構成読み取りキャッシュを無効にする場合。
BROWSERSLIST_DISABLE_CACHE=1 npx webpack BROWSERSLIST_DANGEROUS_EXTENDセキュリティ共有可能な構成名チェックを無効にする。
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack BROWSERSLIST_ROOT_PATHこのパス上のファイルの読み取りを防ぎます。
BROWSERSLIST_ROOT_PATH=. npx webpackbrowserslist.coverage()ブラウザ市場のカバレッジを返します。
const browsers = browserslist ( '> 1% in US' )
browserslist . coverage ( browsers , 'US' ) //=> 83.1browserslist.loadConfig()これは、 browserslist()を呼び出すようなものですが、ブラウザではなくconfigのクエリを返します。
browserslist . loadConfig ( { file : process . cwd ( ) } ) ?? browserslist . defaultsbrowserslist.defaultsデフォルトのクエリを備えた配列。
BrowserSlistは、ホスティングプロセスの期間中、 package.jsonおよびbrowserslistファイルから読み取る構成と、ファイルの存在に関する知識をキャッシュします。
これらのキャッシュをクリアするには、使用してください。
browserslist . clearCaches ( )キャッシュを完全に無効にするには、 BROWSERSLIST_DISABLE_CACHE環境変数を設定します。
セキュリティの脆弱性を報告するには、Tideliftセキュリティの連絡先を使用してください。 Tideliftは、修正と開示を調整します。
Tideliftサブスクリプションの一部として利用可能。
browserslistおよび他の何千ものパッケージのメンテナーは、Tideliftと協力して、アプリケーションを構築するために使用するオープンソースの依存関係の商業サポートとメンテナンスを提供しています。時間を節約し、リスクを減らし、コードの健康を改善しながら、使用する正確な依存関係のメンテナーに支払います。もっと詳しく知る。
update-browserslist-db Docsを参照してください
