שימוש ב-Baseline עם Browserslist

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

Tony Conway

תאריך פרסום: 7 במאי 2025

Browserslist הוא אחד הכלים הפופולריים ביותר להגדרת גרסאות דפדפנים נתמכות מינימליות בבסיס הקוד של חזית האתר. המפתחים מוסיפים שאילתה browserslist לקובץ package.json, ו-Browserslist חושף רשימה של דפדפנים נתמכים מינימליים. אפשר להשתמש ב-Browserslist עם מגוון רחב של כלים פופולריים לניפוי שגיאות, להוספת פוליפילים ולאריזה, כולל:

• 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, כוללות את כל התכונות שהיו זמינות לאחרונה בסוף השנה שצוינה.

בהתאם לבסיס המשתמשים שלכם, יכול להיות שתוכלו לטרגט את 'בסיס נתונים זמין באופן נרחב', או שתצטרכו לטרגט שנה קודמת של בסיס נתונים. כדאי להיעזר בכלי הניתוח או בכלי למעקב אחר ביצועי משתמשים כדי להבין אילו גרסאות דפדפנים יש למשתמשים שלכם.

התקנה של browserslist-config-baseline

אחרי שתחליטו לאילו תכונות של 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

איך לטרגט 'בסיס נתונים' זמין באופן נרחב

כדי לטרגט את 'בסיס נתונים זמין באופן נרחב', מעדכנים או מוסיפים קובץ תצורה של 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, ויכול להיות שדפדפנים נוספים ייכללו בעתיד.

כדי לכלול את הדפדפנים האלה בהגדרת Baseline, מוסיפים את /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 הוא כלי build פופולרי לאריזה של JavaScript. אם משתמשים בברירת המחדל של החבילה @babel/preset-env, הרבה שיטות וממשקי API מודרניים של JavaScript יוחלפו בסינטקס מפורט יותר שנדרש בדפדפנים ישנים יותר:

עם זאת, הגדרת browserslist-config-baseline לטירגוט Baseline 2020 באותו פרויקט לדוגמה מקטינה באופן משמעותי את גודל הפלט של ה-JavaScript הזה, כי נדרשות פחות טרנספורמציות תחביר:

אתם יכולים לנסות זאת בעצמכם באמצעות קוד לדוגמה במאגר baseline-demos של Google Chrome Labs.

ב-linters

חלק מכלי ה-linting כבר פועלים עם 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.