نحوه استفاده از Baseline در پروژه

1. مقدمه

Baseline ابتکاری است که پیام‌های واضح‌تری را ارائه می‌کند که امروزه ویژگی‌های وب قابل استفاده و ایمن هستند. به لطف پیشرفت در ابزارسازی پایه، اکنون می‌توانید از Baseline مستقیماً در پروژه‌های خود به‌عنوان جستجوی فهرست مرورگرها استفاده کنید تا زنجیره ابزار شما بتواند خروجی کد را بر اساس هدف خط پایه که انتخاب می‌کنید تغییر دهد.

در این کد لبه، یاد خواهید گرفت که چگونه از Baseline در یک پروژه نمونه استفاده کنید، و چگونه آن را برای انتخاب یک هدف Baseline خاص پیکربندی کنید. شما همچنین می توانید مشاهده کنید که چگونه خروجی زنجیره ابزار پروژه بسته به هدف پایه ای که انتخاب کرده اید تغییر می کند.

2. دمو را روی دستگاه محلی خود تنظیم کنید

ابتدا به برنامه ترمینال مورد نظر خود بروید، مخزن نسخه آزمایشی را شبیه سازی کنید و سپس دایرکتوری پروژه را وارد کنید:

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

در این مرحله، نسخه آزمایشی از قبل دارای Baseline یکپارچه خواهد بود، اما شما می خواهید یک commit را بررسی کنید که شما را از ابتدا شروع می کند:

git checkout 94f12e34

با شبیه سازی مخزن، نسخه ی نمایشی اکنون می تواند چرخش شود. این پروژه از nvm برای مدیریت Node versioning استفاده می کند. اگر نسخه نسبتاً جدید Node را به صورت سراسری نصب کرده‌اید، احتمالاً نیازی به تکمیل این مرحله ندارید - اما اگر از nvm استفاده می‌کنید، دستورات زیر را اجرا کنید:

nvm install
nvm use

از اینجا، بسته های پروژه را نصب کنید:

npm install

اگر می خواهید دمو را ببینید، دستور زیر را اجرا کنید:

npm start

سپس به http://localhost:8080 بروید. خود نسخه ی نمایشی لیستی از کارت هایی است که با استفاده از فیلد فرم در بالای صفحه قابل فیلتر هستند. خود برنامه از ترکیبی از ویژگی‌هایی استفاده می‌کند که به یک آستانه اولیه رسیده‌اند.

پس از اتمام نسخه ی نمایشی، به ترمینال خود بروید و Ctrl+C را فشار دهید تا اجرای دمو در هر زمانی متوقف شود.

3. نحوه ادغام Baseline در پروژه

این نسخه نمایشی در ابتدا پیکربندی فهرست مرورگرها را مشخص نمی کند. فهرست مرورگرها یک نحو پرس و جو فشرده است که به زنجیره های ابزار می گوید که حداقل نسخه های مرورگر باید پشتیبانی شوند. به عنوان مثال، استفاده از پرس و جوی last 3 years طیف وسیعی از اهداف را مشخص می کند. در این نسخه ی نمایشی، از یک بسته npm به نام browserslist-config-baseline برای تعیین یک جستجوی فهرست مرورگرها استفاده می کنیم که با اهداف Baseline که می توانید در زنجیره ابزار خود استفاده کنید، تراز باشد.

برای شروع، browserslist-config-baseline را مانند این نصب کنید:

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

پس از نصب، این بسته به شما امکان می‌دهد یک جستجوی فهرست مرورگرهای extends را در پروژه خود تعیین کنید که به فهرستی از مرورگرهای Baseline حل می‌شود. این اهداف پایه می تواند یکی از موارد زیر باشد:

  • اهداف متحرک که به مرور زمان با انتشار مرورگرهای جدید به روز می شوند:
    • خط پایه جدیداً در دسترس است ، که ویژگی‌های قابل همکاری پیاده‌سازی شده در مرورگر اصلی را در هر زمان از زمان کنونی تا 30 ماه پیش تراز می‌کند.
    • Baseline به طور گسترده در دسترس است ، که شامل ویژگی‌های قابل همکاری است که 30 ماه یا بیشتر از آن در مرورگر اصلی تنظیم شده است.
  • اهداف ثابت ، که نسخه‌های مرورگر را در یک نقطه زمانی ثابت نشان می‌دهند. اینها به صورت سالهای 2016 تا سال جاری بیان می شوند.

برای شروع، ما از browserslist-config-baseline برای انتخاب هدف متحرک Baseline به طور گسترده در دسترس برای پروژه استفاده می کنیم. برای انجام این کار، package.json را باز کنید و موارد زیر را اضافه کنید:

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

4. با انتخاب اهداف مختلف Baseline، تغییرات در خروجی کد را مشاهده کنید

شما فقط Baseline Widely موجود را به عنوان هدفی برای پروژه آزمایشی انتخاب کردید. بعد، شما می خواهید پروژه را بسازید:

npm run build

خروجی اضافی زیادی وجود دارد زیرا گزینه debug برای @babel/preset-env به عنوان true در babel.config.js پروژه مشخص شده است. ابتدا به اندازه CSS و جاوا اسکریپت در آمار باندلر توجه کنید:

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]

در اینجا توجه داشته باشید که بسته جاوا اسکریپت 208 کیلوبایت و CSS 3.64 کیلوبایت است. زیرا این پروژه از core-js برای polyfills جاوا اسکریپت و autoprefixer برای اعمال پیشوندهای خاص فروشنده برای ویژگی‌های CSS استفاده می‌کند که هنوز به طور کامل قابل تعامل نیستند. هم core-js و هم autoprefixer تحت تأثیر browserslist-config-baseline هستند.

نکته دیگری که در خروجی باید به آن توجه کرد این است که چگونه جستجوی فهرست مرورگرهای شما برای Baseline Widely available به جستجوی فهرست مرورگرها ترجمه می شود. در پروژه شما، چیزی شبیه به این خواهد بود: 

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

به پلی پرهای تزریق شده توسط 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" }

اگر هدف Baseline خود را تغییر دهید، این خروجی می تواند تغییر کند. فرض کنید برنامه شما باید از مجموعه بسیار قدیمی‌تری از مرورگرها پشتیبانی کند زیرا SLA سخت‌گیرانه‌تر است. اگر این مورد برای شما باشد، احتمالاً هدف محافظه کارانه تری را انتخاب می کنید. در فایل package.json خود، پیکربندی فهرست مرورگرها را تغییر دهید تا موارد زیر را منعکس کند: 

"browserslist": "extends browserslist-config-baseline/2016"

این گزینه Baseline 2016 را به عنوان هدف انتخاب می‌کند و به جستجوی فهرست مرورگرها ترجمه می‌شود. پس از اجرای مجدد بیلد، می توانید به تفاوت های موجود در خروجی زنجیره ابزار توجه کنید: 

npm run build

ابتدا به تغییر اندازه فایل برای جاوا اسکریپت و 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]

توجه داشته باشید که بسته جاوا اسکریپت تقریباً 30 کیلوبایت افزایش یافته است. CSS پروژه فقط کمی بزرگتر است، زیرا autoprefixer پیشوندهای فروشنده بیشتری را بر اساس هدف پایه 2016 اضافه می کند. همچنین به تغییر کوئری فهرست مرورگرها توجه کنید: 

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

در مقایسه با هدف Baseline Widely در دسترس، این نسخه‌های مرورگر بسیار بسیار زودتر از آن هستند - به اندازه‌ای زودتر که نسخه Edge که در این مورد هدف قرار می‌گیرد، پیش از Chromium است.

پلی پرهای تزریق شده توسط core-js نیز تغییر خواهند کرد، که به طور قابل توجهی بیشتر از زمانی است که Baseline Widely available به عنوان هدف انتخاب شده است: 

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 یا خود برنامه. برای کاربردهای بسیار پیچیده‌تر، می‌توانید انتظار نتایج بسیار متفاوتی را داشته باشید - احتمالاً حتی بیشتر از طریق چند پر کردن، تبدیل‌ها و سایر منابع کد اضافی برای انطباق با هدف Baseline که انتخاب می‌کنید.

5. هدف قرار دادن مرورگرهای پایین دستی با browserslist-config-baseline

برای بررسی، مجموعه مرورگر اصلی که Baseline هدف قرار می دهد شامل مرورگرهای زیر است:

  • کروم
  • کروم در اندروید
  • فایرفاکس
  • فایرفاکس در اندروید
  • لبه
  • سافاری در macOS
  • سافاری در iOS

با این حال، می توانید آنچه را که به عنوان "مرورگرهای پایین دستی" شناخته می شود، هدف قرار دهید. این مرورگرها آنهایی هستند که موتورهای آنها از یک مرورگر در مجموعه مرورگر اصلی - اغلب Chromium - مشتق شده است. از جمله مرورگرهایی مانند اپرا، اینترنت سامسونگ و غیره. می‌توانید browserslist-config-baseline را برای هدف قرار دادن آنها در فایل package.json خود پیکربندی کنید: 

"browserslist": "extends browserslist-config-baseline/with-downstream"

این مرورگرهای پایین دستی را مطابق با هدف Baseline Widely available هدف قرار می دهد. برای اینکه ببینید چگونه این مشکل در یک جستجوی فهرست مرورگرها حل می شود، پروژه را دوباره بسازید: 

npm start

سپس به تغییر کوئری فهرست مرورگرها توجه کنید: 

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"

با این پیکربندی، پرس و جو فهرست مرورگرهای شما بر این اساس تغییر می کند: 

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 را به عنوان بخشی از پیکربندی خود انتخاب کرده‌اند.

یک مثال خوب از پشتیبانی از Linter برای Baseline شامل ESLint است که به عنوان بخشی از CSS، یک قانون use-baseline را با استفاده از @eslint/css ارائه می‌کند که به شما امکان می‌دهد هر دو Baseline Newly، Baseline Widely در دسترس یا 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" روی Widely available تنظیم می شود.
  2. برای هر دو بسته لینتینگ، سطح گزارش برای نقض لینت روی "warn" تنظیم شده است. این را می توان روی "error" تنظیم کرد تا با یک کد خطا حذف شود تا از ایجاد یک ساخت جلوگیری شود.

ممکن است قبلاً هنگام اجرای npm run build خروجی linter را دیده باشید، اما برای دیدن خروجی linter به تنهایی، می توانید موارد زیر را اجرا کنید: 

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 در پروژه شما نیاز به درک درستی از ابزارهای ساخت اساسی و فهرست مرورگرها دارد، اما عمل قرار دادن آن در پروژه های شما باید با کمی کار امکان پذیر باشد. مزیت اصلی استفاده از آن این است که دیگر لازم نیست به مرورگرهایی که پشتیبانی می کنید از نظر شماره نسخه فکر کنید، بلکه به یک هدف پایه که کارهای سنگین را برای شما انجام می دهد فکر کنید.

علاوه بر این، نسخه‌ای از این نسخه نمایشی وجود دارد که روی Rollup اجرا می‌شود ، و این Codelab را می‌توان تا حد زیادی با استفاده از آن نسخه آزمایشی نیز دنبال کرد.

پشتیبانی خط پایه نیز در دیگر ابزارهای بسته‌بندی ظاهر می‌شود. به عنوان مثال، Vite که از Rollup در زیر سرپوش استفاده می کند، اکنون مرورگرهای Baseline Widely در دسترس را به طور پیش فرض از نسخه 7 هدف قرار می دهد .

با این حال شما تصمیم به انجام آن دارید، با معرفی browserslist-config-baseline به زنجیره ابزار پروژه خود - و انتخاب یک هدف Baseline که برای شما کار می کند - می توانید مرورگرها را به روشی ساده تر و قابل اطمینان تر مورد هدف قرار دهید.