เผยแพร่: 7 พฤษภาคม 2025
Browserslist เป็นหนึ่งในเครื่องมือที่ได้รับความนิยมสูงสุดสำหรับการกำหนดค่าเวอร์ชันเบราว์เซอร์ขั้นต่ำที่รองรับในฐานโค้ดฝั่งหน้า นักพัฒนาซอฟต์แวร์จะเพิ่มการค้นหา browserslist ลงในไฟล์ package.json และ Browserslist จะแสดงรายการเบราว์เซอร์ขั้นต่ำที่รองรับ Browserslist สามารถใช้กับเครื่องมือที่นิยมมากมายสำหรับการตรวจหาข้อบกพร่อง การใช้ polyfill และการสร้างแพ็กเกจ ซึ่งรวมถึง
- Autoprefixer
- Babel โดยใช้
@babel/preset-env - PostCSS โดยใช้
postcss-preset-env - ESLint โดยใช้
eslint-plugin-compat - Stylelint โดยใช้
stylelint-no-unsupported-browser-features - webpack
เป้าหมายพื้นฐาน
เมื่อตัดสินใจใช้ Baseline คุณควรพิจารณาฐานผู้ใช้และเลือกชุดฟีเจอร์ Baseline ที่ต้องการกําหนดเป้าหมาย
- พร้อมใช้งานในวงกว้างตามเกณฑ์พื้นฐานประกอบด้วยฟีเจอร์ทั้งหมดของเว็บที่เบราว์เซอร์หลักตามเกณฑ์พื้นฐานรองรับอย่างเต็มรูปแบบเมื่อ 30 เดือนที่ผ่านมา
- ชุดฟีเจอร์ของปีฐาน เช่น ปีฐาน 2020 จะรวมฟีเจอร์ทั้งหมดที่เพิ่งเปิดตัวเมื่อสิ้นสุดปีที่ระบุ
คุณอาจกําหนดเป้าหมายเป็น "พร้อมให้บริการในวงกว้าง" ของข้อมูลพื้นฐาน หรืออาจต้องกําหนดเป้าหมายเป็นปีฐานที่เก่ากว่า ทั้งนี้ขึ้นอยู่กับฐานผู้ใช้ ปรึกษาเครื่องมือวิเคราะห์หรือ RUM เพื่อทําความเข้าใจว่าผู้ใช้ใช้เบราว์เซอร์เวอร์ชันใด
ติดตั้ง browserslist-config-baseline
เมื่อตัดสินใจเลือกชุดฟีเจอร์พื้นฐานที่ต้องการกําหนดเป้าหมายแล้ว คุณจะใช้เป้าหมายนั้นกับเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ได้ วิธีที่ง่ายที่สุดในการดําเนินการนี้สําหรับเครื่องมือที่ใช้ browserslist คือการติดตั้ง browserslist-config-baseline
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
วิธีกําหนดเป้าหมาย Baseline ที่พร้อมให้บริการในวงกว้าง
หากต้องการกําหนดเป้าหมายเป็น "พร้อมใช้งานในวงกว้าง" ของ Baseline ให้อัปเดตหรือเพิ่มการกําหนดค่า browserlist ใน package.json โดยใช้คีย์เวิร์ด extends ดังนี้
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
เมื่อ browserslist โหลดรายการเบราว์เซอร์ที่รองรับ browserslist-config-baseline จะสร้างเวอร์ชันเบราว์เซอร์ขั้นต่ำปัจจุบันแบบไดนามิกที่รองรับฟีเจอร์ทั้งหมดที่พร้อมให้บริการในวงกว้างแล้ว นอกจากนี้ คุณยังเพิ่ม extends browserslist-config-baseline ลงในไฟล์ .browserslistrc ได้ด้วย ซึ่งระบบจะจัดการไฟล์ดังกล่าวในลักษณะเดียวกัน
วิธีกําหนดเป้าหมายปีฐาน
หากต้องการกําหนดเป้าหมายชุดฟีเจอร์ปีฐาน ให้เพิ่ม / และปีในรูปแบบ YYYY ต่อท้ายข้อความค้นหา browserslist ดังนี้
"browserslist": "extends browserslist-config-baseline/2020"
วิธีระบุเบราว์เซอร์ปลายทาง
ชุดเบราว์เซอร์หลักตามค่าเริ่มต้นประกอบด้วย Chrome, Edge, Firefox และ Safari ส่วนเบราว์เซอร์อื่นๆ นั้นใช้โค้ดโอเพนซอร์สเดียวกับ Chrome และ Edge ซึ่งก็คือ Chromium และควรรองรับชุดฟีเจอร์เดียวกันกับ Chromium เวอร์ชันที่ใช้
browserslist-config-baseline ใช้ baseline-browser-mapping เพื่อเชื่อมโยงเวอร์ชันเบราว์เซอร์กับชุดฟีเจอร์ที่รองรับ การแมปสำหรับ UC Browser บนอุปกรณ์เคลื่อนที่และ QQ Browser บนอุปกรณ์เคลื่อนที่พร้อมใช้งานใน baseline-browser-mapping และอาจรวมเบราว์เซอร์อื่นๆ ในอนาคต
หากต้องการรวมเบราว์เซอร์เหล่านี้ในการกําหนดค่าพื้นฐาน ให้เพิ่ม /with-downstream หลังชื่อโมดูลในการกําหนดค่า browserslist ทันที
"browserslist": "extends browserslist-config-baseline/with-downstream"
หรือ
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
ตัวอย่างการใช้งาน browserslist-config-baseline
ในเครื่องมือการสร้างแพ็กเกจ
การเพิ่ม browserslist-config-baseline ลงในที่เก็บข้อมูลจะมีผลทันที Babel เป็นเครื่องมือสร้างที่ได้รับความนิยมสำหรับการจัดแพ็กเกจ JavaScript หากคุณใช้ค่าเริ่มต้นของแพ็กเกจ @babel/preset-env ระบบจะแทนที่ API และเมธอด JavaScript สมัยใหม่จำนวนมากด้วยไวยากรณ์ที่ละเอียดกว่าซึ่งเบราว์เซอร์รุ่นเก่าต้องการ
อย่างไรก็ตาม การตั้งค่า browserslist-config-baseline ให้กำหนดเป้าหมายเป็น Baseline 2020 ในโปรเจ็กต์ตัวอย่างเดียวกันจะลดขนาดเอาต์พุตของ JavaScript นี้ลงอย่างมาก เนื่องจากต้องใช้การเปลี่ยนรูปแบบไวยากรณ์น้อยลง
ลองทำตามด้วยตนเองโดยใช้โค้ดตัวอย่างในที่เก็บข้อมูล baseline-demos ของ Google Chrome Labs
ในโปรแกรมวิเคราะห์โค้ด
เครื่องมือตรวจสอบบางอย่างทำงานร่วมกับ Browserslist อยู่แล้ว หรือสามารถทําให้ทำงานร่วมกับ Browserslist ได้โดยใช้โมดูลความเข้ากันได้ เช่น stylelint สามารถใช้การกำหนดค่า browserslist โดยใช้โมดูล stylelint-browser-compat ตั้งค่าไฟล์ stylelint.config.js ให้ใช้ browserslist-config-baseline โดยทำดังนี้
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
ตอนนี้ Stylelint จะแจ้ง CSS ที่ไม่ได้อยู่ใน Baseline ที่พร้อมใช้งานในวงกว้าง ดังนี้
Stylelint ยังมีปลั๊กอินที่ช่วยให้คุณตั้งค่ากฎ Baseline ได้โดยตรง แต่หากคุณใช้ browserslist เพื่อจัดการการกําหนดค่าอยู่แล้ว browserslist-config-baseline จะเป็นโซลูชันที่พร้อมใช้งานทันที
วิธีมีส่วนร่วมใน browserslist-config-baseline
หากต้องการส่งคำขอฟีเจอร์สำหรับ browserslist-config-baseline ให้สร้างปัญหาหรือดึงคำขอในที่เก็บ GitHub
หากต้องการมีส่วนร่วมในข้อมูลเบราว์เซอร์ดาวน์สตรีมเพิ่มเติมหรือรายงานปัญหาเกี่ยวกับข้อมูล ให้สร้างปัญหาหรือคำขอดึงข้อมูลในที่เก็บข้อมูล baseline-browser-mapping