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

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. العرض التوضيحي نفسه هو قائمة بطاقات يمكن فلترتها باستخدام حقل نموذج في أعلى الصفحة. يستخدم التطبيق نفسه مزيجًا من الميزات التي بلغت الحد الأدنى من متطلبات Baseline.

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

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

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

الأهداف المتغيّرة، التي يتم تعديلها بمرور الوقت عند إصدار متصفّحات جديدة:
- السمات الأساسية المتاحة حديثًا: تتوافق هذه السمات مع الميزات القابلة للتشغيل التفاعلي التي تم تنفيذها على مجموعة المتصفّحات الأساسية في أي وقت من الوقت الحالي إلى 30 شهرًا مضت.
- Baseline Widely available، الذي يتضمّن ميزات قابلة للتشغيل المتبادل تم تنفيذها في مجموعة المتصفّحات الأساسية قبل 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" }

الخلاصة هنا هي أنّ استهداف Baseline يمكن أن يكون له تأثير كبير في طريقة تحويل تطبيقك من خلال سلسلة الأدوات في مشروعك. التطبيق في هذا المثال بسيط للغاية، ولا يتضمّن الكثير من ميزات تجربة المطوّرين المتطوّرة في 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 ESLint، التي توفّر قاعدة use-baseline باستخدام @eslint/css كجزء من التحليل باستخدام أداة Lint لـ 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"
      }]
    }
  }
];

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

تستخدم حِزم التحليل باستخدام أداة Lint في HTML وCSS قاعدة use-baseline، ويتم ضبطها على "متاحة على نطاق واسع" باستخدام خيار الإعداد available: "widely".
بالنسبة إلى حزمتَي التحليل باستخدام أداة Lint، تم ضبط مستوى السجلّ لمخالفات المدقّق على "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 الذي يتولّى عنك المهام الصعبة.

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

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

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