ดาวน์โหลด browserslist - ดาวน์โหลด browserslist ว์เซอร์ลิสต์

browserslist

ซอร์สโค้ดอื่น ๆ

4.24.2

ดาวน์โหลด

รายชื่อเบราว์เซอร์

ตัวกำหนดค่าเบราว์เซอร์เป้าหมายและ Node.js รุ่นระหว่างเครื่องมือส่วนหน้าแตกต่างกัน ใช้ใน:

AutopreFixer
บาเบล
POSTCSS-PRESET-ENV
Eslint-plugin-compat
Stylelint-no-unsupported-browser-features
postcss-normalize
ล้าสมัย-webpack-plugin

เครื่องมือทั้งหมดจะค้นหาเบราว์เซอร์เป้าหมายโดยอัตโนมัติเมื่อคุณเพิ่มสิ่งต่อไปนี้ใน 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 เพื่อฟรีจากการอัปเดตเวอร์ชันด้วยตนเอง เบราว์เซอร์ลิสต์จะใช้ caniuse-lite กับฉันสามารถใช้ข้อมูลสำหรับการสืบค้นนี้ได้หรือไม่

คุณสามารถตรวจสอบว่าการกำหนดค่าทำงานอย่างไรที่สนามเด็กเล่นของเรา: browsersl.ist

สารบัญ

เครื่องมือ
แนวทางปฏิบัติที่ดีที่สุด
การสอบถาม
ไฟล์กำหนดค่า
กำหนดค่าที่แชร์ได้
การกำหนดค่าสำหรับสภาพแวดล้อมที่แตกต่างกัน
ข้อมูลการใช้งานที่กำหนดเอง
JS API
ตัวแปรสภาพแวดล้อม
แคช
การติดต่อด้านความปลอดภัย
สำหรับองค์กร

ผู้สนับสนุน

Browserslist ต้องการการสนับสนุนของคุณ เรากำลังรับเงินบริจาคที่ Open Collective

> .5% or last 2 versions
> .5%, last 2 versions and Combiner
(จุดตัด) > .5% and last 2 versions not Combiner
(ส่วนประกอบสัมพัทธ์) ทั้งสามนี้เทียบเท่ากัน:
> .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 insensitive):

defaults : เบราว์เซอร์เริ่มต้นของเบราว์เซอร์ลิสต์ ( > 0.5%, last 2 versions, Firefox ESR, not dead )
โดยสถิติการใช้งาน:
- > 5% : รุ่นเบราว์เซอร์ที่เลือกโดยสถิติการใช้งานทั่วโลก >= , < และ <= ทำงานด้วย
- > 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 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.js เวอร์ชัน:
- node 10 และ node 10.4 : เลือก node.js ล่าสุด 10.xx หรือ 10.4.x release
- last 2 node versions : เลือก 2 Node.js ล่าสุด
- last 2 node major versions : เลือก 2 รุ่น Major-Version Node.js รุ่นล่าสุด
- current node : เวอร์ชัน node.js ใช้โดย Browserslist ในขณะนี้
- maintained node versions : เวอร์ชัน node.js ทั้งหมดซึ่งยังคงอยู่โดยมูลนิธิ Node.js
เบราว์เซอร์เวอร์ชัน:
- iOS 7 : เบราว์เซอร์ iOS เวอร์ชัน 7 โดยตรง หมายเหตุว่า op_mini มีเวอร์ชันพิเศษ all
- Firefox > 20 : Firefox รุ่นใหม่กว่า 20. >= , < และ <= ทำงานด้วย นอกจากนี้ยังใช้งานได้กับ Node.js
- ie 6-8 : เลือกช่วงของเวอร์ชันรวม
- Firefox ESR : Firefox Extended Support Release ล่าสุด
- PhantomJS 2.1 และ PhantomJS 1.9 : เลือกรุ่น Safari คล้ายกับ phantomjs runtime
extends browserslist-config-mycompany : ใช้การสืบค้นจากแพ็คเกจ NPM browserslist-config-mycompany
โดยการสนับสนุนเบราว์เซอร์:
ในแบบสอบถามตัวอย่างเหล่านี้ es6 และ es6-module เป็นพารามิเตอร์ feat จาก URL ของหน้า CA CAL I Cleper รายการคุณสมบัติที่มีอยู่ทั้งหมดสามารถดูได้ที่ 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 : ทุกรุ่นเปิดตัวตั้งแต่ปี 2558 ( 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

เบราว์เซอร์

ตารางตารางต่อไปนี้ชื่อเบราว์เซอร์และอุปกรณ์เป้าหมายของพวกเขาลงในตัวระบุที่ใช้โดย Browserslist

ชื่อเบราว์เซอร์	เดสก์ท็อป	Android	iOS	มือถืออื่น ๆ
Android (WebView)		`Android`
Baidu	`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` ¹	↪︎ `ios_saf` ²
โอเปร่ามินิ ³		`OperaMini` `op_mini`
เบราว์เซอร์ QQ		`and_qq`
ซาฟารี	`Safari`		`iOS` `ios_saf`
Samsung Internet		`Samsung`
เบราว์เซอร์ UC		`UCAndroid` `and_uc`

↪︎ name บอกเป็นนัยว่าเบราว์เซอร์ใช้เครื่องยนต์เดียวกันที่จับตาม name
¹ Opera Mobile ≈ Chrome Android
² เบราว์เซอร์ iOS ทั้งหมดใช้ webkit
³ Opera Mini มี 2 โหมด“ สุดขีด” และ“ สูง” สำหรับการประหยัดข้อมูล op_mini ตั้งเป้าหมายที่ "สุดขั้ว" “ สูง” เข้ากันได้กับโอเปร่ามือถือปกติ

ไฟล์กำหนดค่า

`package.json`

หากคุณต้องการลดไฟล์ config ในรูทโครงการคุณสามารถระบุเบราว์เซอร์ใน package.json ด้วยคีย์ browserslist :

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

`.browserslistrc`

การกำหนดค่าเบราว์เซอร์สลิสต์ที่แยกออกควรตั้งชื่อ .browserslistrc และมีการสืบค้นเบราว์เซอร์ที่แยกออกเป็นบรรทัดใหม่ แต่ละบรรทัดจะรวมกับ or combiner ความคิดเห็นเริ่มต้นด้วย # symbol:

 # Browsers that we support

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

เบราว์เซอร์ลิสต์จะตรวจสอบการกำหนดค่าในทุกไดเรกทอรีใน path ดังนั้นหากเครื่องมือกระบวนการ app/styles/main.css คุณสามารถใส่ config ไปที่รูท 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

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 config:

 [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 (ซึ่งอาจเป็นไฟล์) เพื่อค้นหาไฟล์ config ค่อนข้าง

ตัวเลือก:

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 พร้อม Path to Config File
```
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() แต่กลับมาสืบค้นของ Configs ไม่ใช่เบราว์เซอร์

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

`browserslist.defaults`

อาร์เรย์ที่มีแบบสอบถามเริ่มต้น

แคช

เบราว์เซอร์ลิสต์แคชการกำหนดค่าที่อ่านจาก package.json และไฟล์ browserslist รวมถึงความรู้เกี่ยวกับการมีอยู่ของไฟล์ตลอดระยะเวลาของกระบวนการโฮสต์

เพื่อล้างแคชเหล่านี้ให้ใช้:

 browserslist . clearCaches ( )

หากต้องการปิดใช้งานการแคชโดยสิ้นเชิงให้ตั้งค่าตัวแปรสภาพแวดล้อม BROWSERSLIST_DISABLE_CACHE

การติดต่อด้านความปลอดภัย

หากต้องการรายงานช่องโหว่ด้านความปลอดภัยโปรดใช้ผู้ติดต่อ TideLift Security TideLift จะประสานงานการแก้ไขและการเปิดเผย

สำหรับองค์กร

มีให้เป็นส่วนหนึ่งของการสมัครสมาชิก TideLift

ผู้ดูแล browserslist และแพ็คเกจอื่น ๆ อีกหลายพันชุดกำลังทำงานร่วมกับ TideLift เพื่อให้การสนับสนุนเชิงพาณิชย์และการบำรุงรักษาสำหรับการพึ่งพาโอเพ่นซอร์สที่คุณใช้เพื่อสร้างแอปพลิเคชันของคุณ ประหยัดเวลาลดความเสี่ยงและปรับปรุงสุขภาพของรหัสในขณะที่จ่ายค่ารักษาผู้ดูแลการพึ่งพาที่แน่นอนที่คุณใช้ เรียนรู้เพิ่มเติม