استخدام 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 الأساسية قبل 30 شهرًا أو أكثر.
• تتضمّن مجموعات ميزات السنة الأساسية، مثل السنة الأساسية 2020، جميع الميزات التي كانت متاحة حديثًا في نهاية السنة المحدّدة.

استنادًا إلى قاعدة المستخدمين لديك، قد تتمكّن من استهداف "البيانات الأساسية المتوفّرة على نطاق واسع"، أو قد تحتاج إلى استهداف سنة "بيانات أساسية" أقدم. راجِع إحصاءات موقعك الإلكتروني أو أدوات مراقبة المستخدمين في الوقت الفعلي لمعرفة إصدارات المتصفّحات التي يستخدمها المستخدمون.

تثبيت تطبيق "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

كيفية استهداف "المستوى الأساسي" المتوفّر على نطاق واسع

لاستهداف "المستوى الأساسي متاح على نطاق واسع"، عدِّل أو أضِف إعداد 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"

كيفية تحديد المتصفّحات في مرحلة الإصدار

تتضمّن مجموعة المتصفّحات الأساسية في Baseline كلاً من 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 هي أداة إنشاء شائعة لحزمة JavaScript. في حال استخدام الإعدادات التلقائية لحزمة @babel/preset-env، سيتم استبدال العديد من واجهات برمجة التطبيقات والأساليب الحديثة في JavaScript ببنية أكثر تفصيلاً تتطلّبها المتصفحات القديمة:

ومع ذلك، يؤدي ضبط browserslist-config-baseline لاستهداف Baseline 2020 في مثال المشروع نفسه إلى تقليل حجم إخراج JavaScript هذا بشكل كبير، لأنّه لا يلزم إجراء عدد كبير من عمليات تحويل البنية:

يمكنك تجربة ذلك بنفسك باستخدام مثال على الرمز البرمجي في مستودع العروض التوضيحية الأساسية في 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.