از Baseline با فهرست مرورگرها استفاده کنید

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

Tony Conway

تاریخ انتشار: 7 مه 2025

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

• پیشوند خودکار
• Babel با استفاده از @babel/preset-env
• PostCSS با استفاده از postcss-preset-env
• ESLint با استفاده از eslint-plugin-compat
• Stylint با استفاده از stylelint-no-unsupported-browser-features
• بسته وب

اهداف پایه

هنگامی که تصمیم به استفاده از Baseline دارید، باید پایگاه کاربری خود را در نظر بگیرید و تصمیم بگیرید که کدام مجموعه ویژگی Baseline را می‌خواهید هدف قرار دهید:

• Baseline Widely available شامل تمام ویژگی های وب است که 30 ماه یا بیشتر در گذشته توسط مرورگر اصلی Baseline به طور کامل پشتیبانی می شد.
• مجموعه ویژگی‌های سال پایه، به عنوان مثال ، Baseline 2020 ، شامل همه ویژگی‌هایی است که به تازگی در پایان سال مشخص شده در دسترس بودند.

بسته به پایگاه کاربر خود، ممکن است بتوانید خط پایه را به صورت گسترده در دسترس قرار دهید، یا ممکن است لازم باشد سال پایه قدیمی تری را هدف قرار دهید. با ابزارهای تجزیه و تحلیل یا RUM خود مشورت کنید تا متوجه شوید که کاربران شما کدام نسخه مرورگر را دارند.

browserslist-config-baseline را نصب کنید

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

چگونه خط پایه را هدف قرار دهیم به طور گسترده در دسترس است

برای هدف قرار دادن Baseline به طور گسترده در دسترس، پیکربندی فهرست browserlist را با استفاده از کلمه کلیدی extends در package.json به‌روزرسانی یا اضافه کنید:

{
  ...
  "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-Chromium- هستند و باید از همان مجموعه ویژگی‌هایی که هر نسخه از Chromium پیاده‌سازی می‌کنند پشتیبانی کنند.

browserslist-config-baseline baseline-browser-mapping برای مرتبط کردن نسخه های مرورگر با مجموعه ویژگی هایی که پشتیبانی می کنند استفاده می کند. نقشه‌برداری‌ها برای تلفن همراه مرورگر UC و موبایل مرورگر QQ در baseline-browser-mapping موجود است و ممکن است مرورگرهای دیگری در آینده گنجانده شوند.

برای گنجاندن این مرورگرها در پیکربندی Baseline خود، بلافاصله پس از نام ماژول در پیکربندی browserslist خود، /with-downstream را اضافه کنید:

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

یا:

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

نمونه هایی از browserslist-config-baseline در عمل

در ابزار بسته بندی

افزودن browserslist-config-baseline به مخزن شما می تواند تأثیر فوری داشته باشد. Babel یک ابزار ساخت محبوب برای بسته بندی جاوا اسکریپت است. اگر از پیش‌فرض‌های بسته @babel/preset-env استفاده می‌کنید، بسیاری از APIها و متدهای جاوا اسکریپت مدرن با نحو پرمخاطب‌تر مورد نیاز مرورگرهای قدیمی جایگزین خواهند شد:

با این حال، تنظیم browserslist-config-baseline برای هدف قرار دادن Baseline 2020 در همان پروژه نمونه به طور چشمگیری اندازه خروجی این جاوا اسکریپت را کاهش می دهد، زیرا تبدیل های نحوی کمتری مورد نیاز است:

این را خودتان با استفاده از کد مثال موجود در مخزن آزمایشی پایه Google Chrome Labs امتحان کنید.

در لینتر

برخی از لینترها از قبل با فهرست مرورگرها کار می کنند یا می توان با استفاده از یک ماژول سازگاری با فهرست مرورگرها کار کرد. برای مثال، 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'],
      },
    ],
  },
};

Styelint اکنون CSS را که در حال حاضر بخشی از Baseline به طور گسترده در دسترس نیست، پرچم‌گذاری می‌کند:

Styelint همچنین افزونه‌ای را ارائه می‌کند که به شما امکان می‌دهد مستقیماً قوانین Baseline را تنظیم کنید، اما اگر قبلاً از فهرست مرورگرها برای مدیریت پیکربندی خود استفاده می‌کنید، browserslist-config-baseline یک راه‌حل کشویی است.

نحوه مشارکت در browserslist-config-baseline

اگر می‌خواهید برای browserslist-config-baseline یک درخواست ویژگی ایجاد کنید، یک مشکل ایجاد کنید یا در مخزن GitHub درخواست کنید.

اگر می‌خواهید داده‌های مرورگر پایین‌دست بیشتری را ارائه کنید یا مشکل داده را گزارش کنید، یک مشکل یا یک درخواست کشش در مخزن baseline-browser-mapping ایجاد کنید.