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

1. مقدمة

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

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

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

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

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

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

git checkout 94f12e34

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

nvm install
nvm use

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

npm install

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

npm start

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

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

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

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

للبدء، ثبِّت browserslist-config-baseline على النحو التالي:

npm install browserslist-config-baseline --save-dev

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

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

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

"browserslist": "extends browserslist-config-baseline"

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 بالسمة browserslist-config-baseline.

هناك أمر آخر يجب الانتباه إليه في الناتج، وهو كيفية ترجمة طلب بحث 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": "extends browserslist-config-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"
}

مقارنةً بالحد الأدنى المستهدف المتاح على نطاق واسع، تكون إصدارات المتصفّح هذه أقدم بكثير، أي أقدم بما يكفي ليكون إصدار Edge المستهدف في هذه الحالة هو الإصدار السابق لإصدار 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- استهداف المتصفّحات ذات الإصدارات الأقدم باستخدام browserslist-config-baseline

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

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

ومع ذلك، يمكنك استهداف ما يُعرف باسم "المتصفحات المتوافقة مع الإصدارات الأقدم". وهذه المتصفّحات هي تلك التي تم استخلاص محركاتها من متصفّح في مجموعة المتصفّحات الأساسية، وغالبًا ما يكون Chromium. وتشمل هذه المتصفّحات Opera وSamsung Internet وغيرها. يمكنك ضبط browserslist-config-baseline لاستهدافها في ملف package.json على النحو التالي:

"browserslist": "extends browserslist-config-baseline/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": "extends browserslist-config-baseline/with-downstream/2016"

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

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

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

بغض النظر عن الطريقة التي تختارها، يمكنك استهداف المتصفحات بطريقة أبسط وأكثر موثوقية من خلال دمج browserslist-config-baseline في سلسلة أدوات مشروعك واختيار هدف Baseline الذي يناسبك.