เผยแพร่: 7 พฤษภาคม 2025, อัปเดตล่าสุด: 17 กันยายน 2025
Browserslist เป็นหนึ่งในเครื่องมือที่ได้รับความนิยมมากที่สุดสำหรับการกำหนดค่าเวอร์ชันเบราว์เซอร์ขั้นต่ำที่รองรับในฐานโค้ดส่วนหน้า นักพัฒนาซอฟต์แวร์จะเพิ่มคำค้นหา browserslist ลงในไฟล์ package.json (หรือจุดกำหนดค่าอื่นๆ สำหรับ Browserslist เช่น ไฟล์ .browserslistrc) และ Browserslist จะแสดงรายการเบราว์เซอร์ขั้นต่ำที่รองรับ คุณใช้ Browserslist กับเครื่องมือ Linting, Polyfilling และการแพ็กเกจยอดนิยมได้หลากหลาย ซึ่งรวมถึง
- Autoprefixer
- Babel โดยใช้
@babel/preset-env - PostCSS โดยใช้
postcss-preset-env - ESLint โดยใช้
eslint-plugin-compat - Stylelint โดยใช้
stylelint-no-unsupported-browser-features - webpack
เป้าหมายพื้นฐาน
เมื่อตัดสินใจใช้ Baseline คุณควรพิจารณาฐานผู้ใช้และตัดสินใจว่าต้องการกำหนดเป้าหมายชุดฟีเจอร์ Baseline ใด
- Baseline ที่พร้อมใช้งานในวงกว้างประกอบด้วยฟีเจอร์ทั้งหมดของเว็บที่ชุดเบราว์เซอร์หลักของ Baseline รองรับอย่างเต็มรูปแบบในช่วง 30 เดือนที่ผ่านมาหรือนานกว่านั้น
- ชุดฟีเจอร์ปีพื้นฐาน เช่น Baseline 2020 จะรวมฟีเจอร์ทั้งหมดที่พร้อมใช้งานใหม่ ณ สิ้นปีที่ระบุ
คุณอาจกำหนดเป้าหมายเป็น Baseline ที่พร้อมใช้งานอย่างกว้างขวางได้ หรืออาจต้องกำหนดเป้าหมายเป็น Baseline ปีที่เก่ากว่า ทั้งนี้ขึ้นอยู่กับฐานผู้ใช้ ปรึกษาเครื่องมือวิเคราะห์หรือ RUM เพื่อทำความเข้าใจว่าผู้ใช้ของคุณใช้เบราว์เซอร์เวอร์ชันใด
วิธีกำหนดเป้าหมายเป็น "พร้อมใช้งานใหม่หรือพร้อมใช้งานอย่างกว้างขวาง"
การรองรับ Baseline จะรวมอยู่ใน Browserslist ผ่านการค้นหาที่แตกต่างกัน 2-3 รายการ หากต้องการกำหนดเป้าหมายเป็นเบราว์เซอร์ Baseline ที่เพิ่งพร้อมใช้งาน ให้ลองระบุ baseline newly available ในการกำหนดค่า Browserslist
{
...
"browserslist": [
"baseline newly available"
]
...
}
คุณยังระบุ baseline widely available เป็นคำค้นหาได้ด้วย
{
...
"browserslist": [
"baseline widely available"
]
...
}
วิธีกำหนดเป้าหมายปีฐาน
หากต้องการกำหนดเป้าหมายชุดฟีเจอร์ปีฐาน ให้ระบุปีในคำค้นหา เช่น baseline 2024 หากต้องการกำหนดเป้าหมายชุดฟีเจอร์ปี 2024
"browserslist": "baseline 2024"
คุณระบุปีได้ตั้งแต่ baseline 2015 จนถึงปีปัจจุบัน
วิธีระบุเบราว์เซอร์ปลายทาง
ชุดเบราว์เซอร์หลักพื้นฐานประกอบด้วย Chrome, Edge, Firefox และ Safari เบราว์เซอร์อื่นๆ สร้างขึ้นจากโค้ดโอเพนซอร์สเดียวกันกับ Chrome และ Edge ซึ่งก็คือ Chromium และควรจะรองรับชุดฟีเจอร์เดียวกันกับ Chromium เวอร์ชันที่เบราว์เซอร์นั้นๆ นำมาใช้ หากต้องการรวมเบราว์เซอร์เหล่านี้ในการกำหนดค่าพื้นฐาน ให้เพิ่ม with downstream หลังการค้นหาพื้นฐาน เช่น หากต้องการกำหนดเป้าหมายเบราว์เซอร์ดาวน์สตรีมเป็นส่วนหนึ่งของ Baseline Widely available ให้ระบุ baseline widely available with downstream ดังนี้
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream เป็นคำค้นหาที่ถูกต้องอีกคำหนึ่ง เช่นเดียวกับการเพิ่ม with downstream ลงในเป้าหมายรายปี
"browserslist": "baseline 2024 with downstream"
ตัวอย่างการค้นหา Baseline ที่ใช้งานจริง
ในเครื่องมือการสร้างแพ็กเกจ
การใช้การค้นหาพื้นฐานที่ Browserslist มีให้ในโปรเจ็กต์อาจส่งผลในทันที Babel เป็นเครื่องมือบิลด์ยอดนิยมสำหรับการแพ็กเกจ JavaScript หากคุณใช้@babel/preset-envค่าเริ่มต้นของแพ็กเกจ ระบบจะแทนที่ JavaScript API และเมธอดที่ทันสมัยหลายรายการด้วยไวยากรณ์ที่ยาวกว่าซึ่งเบราว์เซอร์รุ่นเก่าจำเป็นต้องใช้
อย่างไรก็ตาม การใช้การค้นหา baseline 2020 เพื่อกำหนดเป้าหมายชุดฟีเจอร์ปี 2020 ในโปรเจ็กต์ตัวอย่างเดียวกันจะช่วยลดขนาดเอาต์พุตของ JavaScript นี้ได้อย่างมาก เนื่องจากต้องมีการแปลงไวยากรณ์น้อยลง
ลองใช้ด้วยตัวคุณเองโดยใช้โค้ดตัวอย่างในที่เก็บbaseline-demos ของ Google Chrome Labs
ในโปรแกรมวิเคราะห์โค้ด
Linter บางตัวใช้งานกับ Browserslist ได้อยู่แล้ว หรืออาจทำให้ใช้งานกับ Browserslist ได้โดยใช้โมดูลความเข้ากันได้ เช่น stylelint สามารถใช้การกำหนดค่า browserslist ได้โดยใช้โมดูล stylelint-browser-compat ตั้งค่าstylelint.config.jsไฟล์ให้ใช้การค้นหาพื้นฐานที่คุณเลือก ดังนี้
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
ตอนนี้ Stylelint จะแจ้ง CSS ที่ไม่ได้เป็นส่วนหนึ่งของ Baseline Widely available ในขณะนี้
นอกจากนี้ Stylelint ยังมีปลั๊กอินที่ช่วยให้คุณตั้งกฎพื้นฐานได้โดยตรง แต่หากคุณใช้ Browserslist เพื่อจัดการการกำหนดค่าอยู่แล้ว การใช้การค้นหาพื้นฐานในตัวที่ Browserslist มีให้ก็เป็นโซลูชันที่ใช้ได้