كيفية استخدام "المتوقع" في مشروعك

1. مقدمة

Baseline هي مبادرة تقدّم رسائل أكثر وضوحًا بشأن ميزات الويب التي يمكن استخدامها اليوم بشكل آمن ومتوافق مع الأنظمة الأساسية المختلفة. بفضل التطورات في أدوات Baseline، يمكنك الآن استخدام Baseline مباشرةً في مشاريعك كـ طلب بحث في Browserslist حتى تتمكّن سلسلة الأدوات من تغيير ناتج الرمز البرمجي استنادًا إلى هدف Baseline الذي تختاره.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام Baseline في مشروع نموذجي، وكيفية إعداده لاختيار هدف Baseline محدّد. ستتمكّن أيضًا من مراقبة كيفية تغيُّر ناتج سلسلة أدوات المشروع استنادًا إلى هدف "الأداء الأساسي" الذي اخترته.

2. إعداد العرض التوضيحي على جهازك

أولاً، انتقِل إلى تطبيق الوحدة الطرفية المفضّل لديك، واستنسِخ مستودع العرض التوضيحي، ثم أدخِل دليل المشروع:

git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack

في هذه المرحلة، سيكون العرض التوضيحي قد تمّ فيه دمج Baseline، ولكن عليك الاطّلاع على عملية الدمج التي تبدأ من البداية:

git checkout d3793f25

بعد استنساخ المستودع، يمكن الآن تشغيل العرض التوضيحي. يستخدم هذا المشروع nvm لإدارة إصدارات Node. إذا كان لديك إصدار حديث من Node مثبّت على مستوى العالم، من المحتمل ألا تحتاج إلى إكمال هذه الخطوة، ولكن إذا كنت تستخدم nvm، شغِّل الأوامر التالية:

nvm install
nvm use

من هنا، ثبِّت حِزم المشروع:

npm install

إذا أردت مشاهدة العرض التوضيحي، شغِّل الأمر التالي:

npm start

بعد ذلك، انتقِل إلى http://localhost:8080. العرض التوضيحي نفسه هو قائمة بطاقات يمكن فلترتها باستخدام حقل نموذج في أعلى الصفحة. يستخدم التطبيق نفسه مزيجًا من الميزات التي بلغت الحد الأدنى من متطلبات "الخط الأساس".

عند الانتهاء من العرض التوضيحي، انتقِل إلى الوحدة الطرفية واضغط على Ctrl+C لإيقاف تشغيل العرض التوضيحي في أي وقت.

3- كيفية دمج Baseline في المشروع

لا يحدّد هذا العرض التوضيحي إعدادات Browserslist في البداية. ‫Browserslist هي صيغة طلب بحث مضغوطة تحدّد الحد الأدنى لإصدارات المتصفحات التي يجب أن تكون متوافقة مع سلاسل الأدوات. على سبيل المثال، سيؤدي استخدام طلب بحث عن last 3 years إلى تحديد مجموعة كبيرة من الاستهدافات. في هذا العرض التوضيحي، سنحدّد طلب بحث Browserslist يتوافق مع استهدافات Baseline التي يمكنك استخدامها في سلسلة الأدوات. يمكن أن تكون الاستهدافات الأساسية واحدة ممّا يلي:

  • الأهداف المتغيّرة، التي يتم تعديلها بمرور الوقت عند إصدار متصفّحات جديدة:
    • السمات الأساسية المتاحة حديثًا: تتوافق هذه السمات مع الميزات القابلة للتشغيل التفاعلي التي تم تنفيذها على مجموعة المتصفّحات الأساسية في أي وقت من الوقت الحالي إلى 30 شهرًا مضت.
    • السمات الأساسية المتاحة على نطاق واسع، والتي تشمل السمات القابلة للتشغيل التفاعلي التي تم تنفيذها على مجموعة المتصفّحات الأساسية قبل 30 شهرًا أو أكثر
  • الاستهدافات الثابتة، التي تمثّل إصدارات المتصفّح في نقطة زمنية ثابتة ويتم التعبير عنها بالسنوات من 2016 إلى السنة الحالية.

للبدء، سنختار هدف "الخط الأساس المتحرّك" المتاح على نطاق واسع للمشروع. لإجراء ذلك، افتح package.json وأضِف ما يلي:

"browserslist": "baseline widely available"

4. مراقبة التغييرات في ناتج الرمز البرمجي من خلال اختيار استهدافات مختلفة في "خط الأساس"

لقد اخترت للتو Baseline Widely available كهدف للمشروع التجريبي. بعد ذلك، عليك إنشاء المشروع باتّباع الخطوات التالية:

npm run build

هناك الكثير من النتائج الإضافية لأنّه تم تحديد الخيار debug لـ @babel/preset-env على أنّه true في babel.config.js الخاص بالمشروع. أولاً، لاحظ حجم CSS وJavaScript في إحصاءات أداة التجميع:

assets by status 213 KiB [emitted]
  asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

يُرجى العِلم أنّ حزمة JavaScript تبلغ 208 كيلوبايت، بينما يبلغ حجم CSS 3.64 كيلوبايت. لأنّ هذا المشروع يستخدم core-js لملء JavaScript وautoprefixer لتطبيق البادئات الخاصة بالمورّدين لخصائص CSS التي لم يتم بعد تحقيق التشغيل التفاعلي الكامل لها. يتأثر كلّ من core-js وautoprefixer بطلب البحث المحدّد في Baseline Browserslist.

هناك أمر آخر يجب الانتباه إليه في الناتج، وهو كيفية ترجمة طلب البحث في Browserslist الخاص بميزة Baseline Widely available إلى طلب بحث في Browserslist. في مشروعك، سيبدو ذلك على النحو التالي:

Using targets: {
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}

لاحظ polyfills التي تم إدخالها بواسطة core-js في ناتج الإنشاء:

The corejs3 polyfill added the following polyfills:
  es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }

يمكن أن يتغيّر هذا الناتج إذا غيّرت استهداف "خط الأساس". لنفترض أنّ تطبيقك يجب أن يتوافق مع مجموعة قديمة جدًا من المتصفّحات بسبب اتفاقية مستوى الخدمة الأكثر صرامة. في هذه الحالة، من المرجّح أن تختار هدفًا أكثر تحفظًا. في ملف package.json، غيِّر إعدادات Browserslist لتعكس ما يلي:

"browserslist": "baseline 2016"

يؤدي ذلك إلى اختيار Baseline 2016 كهدف، وسيتم تحويله إلى طلب بحث في Browerslist. يمكنك ملاحظة الاختلافات في ناتج سلسلة الأدوات بعد إعادة تشغيل الإصدار:

npm run build

أولاً، لاحظ التغيير في حجم ملف JavaScript وCSS الخاص بالمشروع في إحصاءات أداة التجميع:

assets by status 237 KiB [emitted]
  asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

ستلاحظ أنّ حجم حزمة JavaScript قد زاد بمقدار 30 كيلوبايت تقريبًا. إنّ ملف CSS الخاص بالمشروع أكبر قليلاً فقط، وذلك بسبب إضافة autoprefixer المزيد من بادئات المورّدين استنادًا إلى هدف Baseline لعام 2016. يُرجى أيضًا ملاحظة التغيير في طلب البحث في Browserslist:

Using targets: {
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "safari": "10"
}

مقارنةً بالحد الأدنى من الاستهداف المتاح على نطاق واسع، تكون إصدارات المتصفّح هذه أقدم بكثير، أي قبل إصدار Chromium.

ستتغيّر أيضًا عمليات التعبئة التي يتم إدخالها بواسطة core-js، وهو عدد أكبر بكثير من العدد الذي يتم إدخاله عند اختيار "متوافق على نطاق واسع مع الإصدارات الأساسية" كهدف:

The corejs3 polyfill added the following polyfills:
  es.array.filter { "edge":"14" }
  es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.object.to-string { "edge":"14", "firefox":"49" }
  es.array.includes { "firefox":"49" }
  es.string.includes { "edge":"14" }
  es.array.map { "firefox":"49" }
  es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.symbol { "edge":"14", "firefox":"49" }
  es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
  web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.to-string { "edge":"14" }
  es.array.from { "edge":"14", "firefox":"49" }
  es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.test { "edge":"14" }
  es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }

النقطة الأساسية هنا هي أنّ استهدافك الأساسي يمكن أن يكون له تأثير كبير في طريقة تحويل تطبيقك من خلال سلسلة الأدوات الخاصة بمشروعك. التطبيق في هذا المثال بسيط جدًا، ولا يتضمّن الكثير من ميزات تجربة المطوّرين المتطوّرة في React أو التطبيق نفسه. بالنسبة إلى التطبيقات الأكثر تعقيدًا، يمكنك توقّع نتائج مختلفة تمامًا، وربما المزيد من عمليات التعبئة والتحويلات ومصادر أخرى للرموز الإضافية من أجل الالتزام بالحد الأدنى من المتطلبات الأساسية الذي تختاره.

5- استهداف المتصفّحات ذات الإصدارات الأقدم

للتذكير، تتضمّن مجموعة المتصفّحات الأساسية التي تستهدفها Baseline المتصفّحات التالية:

  • Chrome
  • ‫Chrome على Android
  • Firefox
  • ‫Firefox على Android
  • Edge
  • متصفّح Safari على أجهزة macOS
  • متصفّح Safari على أجهزة iOS

ومع ذلك، يمكنك استهداف ما يُعرف باسم "المتصفّحات المتوافقة مع الإصدارات الأقدم". وهذه المتصفّحات هي تلك التي تم استخلاص محركاتها من متصفّح في مجموعة المتصفّحات الأساسية، وغالبًا ما يكون Chromium. وتشمل هذه المتصفّحات Opera وSamsung Internet وغيرها. يمكنك استهداف هذه المتصفّحات بالإضافة إلى تلك الموجودة في مجموعة المتصفّحات الأساسية عن طريق إضافة with downstream إلى أي طلب بحث صالح في Baseline Browserslist:

"browserslist": "baseline widely available with downstream"

يستهدف ذلك المتصفّحات المتوافقة مع الإصدارات الأقدم وفقًا لميزة "الاستهداف الأساسي المتاح على نطاق واسع". لمعرفة كيف يتم تحويل هذا الإعداد إلى طلب بحث Browserslist، أعِد إنشاء المشروع:

npm start

بعد ذلك، لاحظ التغيير في طلب البحث في Browserslist:

Using targets: {
  "android": "108",
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "opera": "94",
  "opera_mobile": "80",
  "safari": "16",
  "samsung": "21"
}

يمكنك أيضًا استهداف المتصفّحات القديمة حسب السنة. على سبيل المثال:

"browserslist": "baseline 2016 with downstream"

باستخدام هذا الإعداد، سيتغيّر طلب بحث Browserslist على النحو التالي:

Using targets: {
  "android": "53",
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "opera": "40",
  "opera_mobile": "80",
  "safari": "10",
  "samsung": "6.2"
}

6. أدوات التدقيق اللغوي والأدوات الأخرى

تُعدّ طلبات البحث الأساسية المضمّنة في Browserslist ملائمة لأدوات مثل أدوات التجميع وأجزاء أخرى من سلسلة الأدوات، ولكن هناك أيضًا قيمة في أدوات أخرى، مثل أدوات التدقيق التي اعتمدت استهدافات Baseline كجزء من إعداداتها.

من الأمثلة الجيدة على أدوات التحليل المتوافقة مع Baseline ESLint، التي توفّر كجزء من تحليل CSS قاعدة use-baseline باستخدام @eslint/css تتيح لك استهداف إما Baseline Newly أو Baseline Widely available أو سنوات Baseline. هناك أيضًا قاعدة مشابهة في حزمة @html-eslint/eslint-plugin الخاصة بالمنتدى تتيح لك إجراء الأمر نفسه لميزات HTML في ملف eslint.config.js:

export default [
  /* Omitted JS linting rules ... */
  // Lint CSS files for Baseline:
  {
    files: ["**/*.css"],
    plugins: {
      css
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to make sure they are using
      // only Baseline Widely available features:
      "css/use-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
  // Lint HTML and JSX files for Baseline:
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"],
    rules: {
      // Lint HTML files to make sure they are using
      // only Baseline Widely available features:
      "@html-eslint/use-baseline": ["warn", {
        available: "widely"
      }]
    }
  }
];

في ما يلي بعض النقاط التي يجب أخذها في الاعتبار في عملية الضبط هذه:

  1. تستخدم حِزم التدقيق في HTML وCSS قاعدة use-baseline، ويتم ضبطها على "متاحة على نطاق واسع" باستخدام خيار الإعداد available: "widely".
  2. بالنسبة إلى حزمتَي التدقيق، تم ضبط مستوى السجلّ لانتهاكات المدقّق على "warn". يمكن ضبط هذه القيمة على "error" لإيقاف العملية مع عرض رمز خطأ لمنع حدوث عملية إنشاء.

ربما رأيت ناتج أداة التدقيق اللغوي عند تشغيل npm run build من قبل، ولكن لعرض ناتج أداة التدقيق اللغوي وحده، يمكنك تشغيل ما يلي:

npm run lint

ستعرض النتائج عدة تحذيرات في ملف CSS الخاص بالمشروع:

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
  222:3  warning  Property 'outline' is not a widely available baseline feature  css/use-baseline

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
  62:3   warning  Property 'outline' is not a widely available baseline feature                                css/use-baseline
  81:23  warning  Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature  css/use-baseline

7. ملخص

يتطلّب استخدام طلبات البحث الأساسية التي توفّرها Browserslist في مشروعك بعض الفهم لأدوات الإنشاء الأساسية وBrowserslist نفسها، ولكن عملية وضعها في مشروع ما تكون موجزة. تتمثّل الفائدة الأساسية من استخدامها في أنّك لن تحتاج بعد الآن إلى التفكير في المتصفّحات التي تتوافق معها من حيث أرقام الإصدارات، بل يمكنك استخدام هدف Baseline الذي يتولّى عنك هذه المهمة الصعبة.

بالإضافة إلى ذلك، يتوفّر إصدار من هذا العرض التوضيحي يعمل على Rollup، ويمكن اتّباع هذا الدرس التطبيقي حول الترميز إلى حد كبير باستخدام هذا العرض التوضيحي أيضًا.

بدأت ميزة "الدعم الأساسي" تظهر أيضًا في أدوات تجميع أخرى. على سبيل المثال، يستهدف Vite، الذي يستخدم Rollup في الخلفية، الآن تلقائيًا المتصفحات المتوافقة مع Baseline Widely منذ الإصدار 7.

بغض النظر عن الطريقة التي تختارها، يمكنك استهداف المتصفحات بطريقة أبسط وأكثر موثوقية من خلال إدخال طلبات البحث الأساسية المتوفّرة في Browserslist إلى مشروعك واختيار هدف أساسي يناسبك.