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 버전을 지정할 수 있습니다 (Case Insensentitive).
defaults : BrowsersList의 기본 브라우저 ( > 0.5%, last 2 versions, Firefox ESR, not dead ).> 5% : 글로벌 사용 통계에 의해 선택된 브라우저 버전. >= , < 및 <= 작업도 작동합니다.> 5% in US : 미국 사용 통계를 사용합니다. 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 버전.iOS 7 : iOS 브라우저 버전 7 직접. op_mini 에는 특별한 버전 all 있습니다.Firefox > 20 : 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 내가 사용하는 페이지의 URL의 feat 매개 변수입니다. 사용 가능한 모든 기능의 목록은 caniuse-lite/data/features 에서 찾을 수 있습니다.fully supports es6 . 예를 들어, fully supports css-grid Edge 12-15를 생략합니다. 브라우저 버전은 부분 지원이있는 것으로 표시되므로 Edge 12-15를 생략합니다.partially supports es6-module 하거나 supports es6-module . 특정 기능에 대한 완전하거나 부분적으로 지원되는 브라우저. 예를 들어, 브라우저 버전은 부분 지원이있는 것으로 표시되므로 partially supports css-grid Edge 12-15 지원이 포함됩니다.browserslist config : BrowsersList 구성에 정의 된 브라우저. 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 : 알파 및 베타 버전.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다음 테이블은 브라우저리스트에서 사용하는 브라우저 이름 및 대상 장치를 식별자로 매핑합니다.
| 브라우저 이름 | 데스크탑 | 기계적 인조 인간 | iOS | 다른 모바일 |
|---|---|---|---|---|
| 안드로이드 (웹 뷰) | Android | |||
| 바이두 | Baidu | |||
| 블랙 베리 | BlackBerry bb | |||
| 크롬 | Chrome | ChromeAndroid and_chr | ↪︎ ios_saf 2 | |
| 가장자리 | Edge | ↪︎ and_chr | ↪︎ ios_saf 2 | |
| 전자 | Electron | |||
| 파이어 폭스 | 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 프로젝트 루트에서 구성 파일을 줄이려면 browserslist 키를 사용하여 package.json 에서 브라우저를 지정할 수 있습니다.
{
"private" : true ,
"dependencies" : {
"autoprefixer" : " ^6.5.4 "
},
"browserslist" : [
" last 1 version " ,
" > 1% " ,
" not dead "
]
}.browserslistrc 분리 된 BrowsersList Config는 .browserslistrc 로 명명되어야하며 새 줄로 브라우저 쿼리가 분할되어야합니다. 각 라인은 or Combiner와 결합됩니다. 댓글은 # 기호로 시작합니다.
# Browsers that we support
last 1 version
> 1%
not dead # no browsers without security updates BrowsersList는 path 의 모든 디렉토리에서 구성을 확인합니다. 따라서 도구 프로세스 app/styles/main.css 인 경우 루트, app/ app/styles 에 구성 할 수 있습니다.
BROWSERSLIST_CONFIG 환경 변수에서 직접 경로를 지정할 수 있습니다.
다음 쿼리를 사용하여 다른 패키지에서 내보내는 BrowsersList 구성을 참조 할 수 있습니다.
"browserslist" : [
" extends browserslist-config-mycompany "
] 보안상의 이유로 외부 구성은 browserslist-config- 접두사가있는 패키지 만 지원합니다. NPM 스코핑 패키지는 @scope/browserslist-config 예 : @scope/browserslist-config 또는 @scope/browserslist-config-mycompany 와 같은 모듈을 명명하거나 접두사하여 지원됩니다.
사용자로부터 BrowsersList 쿼리를 허용하지 않으면 OR BROWSERSLIST_DANGEROUS_EXTEND 환경 변수를 사용하여 유효성 검사를 비활성화 할 수 있습니다.
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack npm 의 해상도를 사용하므로 패키지에서 특정 파일을 참조 할 수도 있습니다.
"browserslist" : [
" extends browserslist-config-mycompany/desktop " ,
" extends browserslist-config-mycompany/mobile "
] 공유 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"
]
} .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 계정에 대한 비밀번호를 제공하지 않고 Google 웹 로그 분석 데이터를 변환 할 수 있습니다.
다른 방법으로 사용 통계 파일을 생성 할 수 있습니다. 파일 형식은 다음과 같아야합니다.
{
"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 : 구성에서 사용하는 환경 섹션. 기본값은 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 문서를 참조하십시오
