Polyfill: bu nima, ishlash prinsipi va API emulyatsiyasi uchun kutubxonalar

Polyfill nima?

Polyfill — ijro muhiti native qo‘llab-quvvatlamaydigan funksionallikni amalga oshiruvchi kod bo‘lagi (odatda JavaScript). Bu atama Remy Sharp tomonidan 2009 yilda so‘z o‘yini sifatida taklif qilingan: Polyfill — devordagi yoriqlarni to‘ldiradigan shpaklyovka (Polyfilla) analogi. Polyfill standart bilan ma’lum brauzer yoki ijro muhitidagi qo‘llab-quvvatlash o‘rtasidagi bo‘shliqlarni to‘ldiradi.

Polyfill mavjud kodni o‘zgartirmaydi — u ijro muhitini kengaytiradi. Agar brauzer Array.prototype.includes-ni qo‘llab-quvvatlamasa, polifill asosiy kod bajarilishidan oldin bu metodni Array prototipiga qo‘shadi. Polifillar yangi global obyektlarni (Promise, Map, Set, Symbol), statik metodlarni (Array.from, Object.assign) va prototip metodlarini emulyatsiya qilishi mumkin.

Feature detection — polifill o‘rnatishdan oldin majburiy mexanizm. User-agent (qaysi brauzer) tekshirish o‘rniga, metod mavjudligini tekshirish kerak: if (!Array.prototype.includes) { Array.prototype.includes = ... }. Bu polifillning mavjud native amalga oshirishni ustiga yozmasligini kafolatlaydi. Google Analytics va boshqa xizmatlar tahlil uchun API qo‘llab-quvvatlashi haqida ma’lumot to‘playdi.

Polifillar qachon paydo bo‘ldi

Birinchi polifillar Internet Explorer 6–8 davrida (2005–2009) dasturchilar W3C standartlari bilan brauzer amalga oshirishlari o‘rtasidagi tafovutni aniqlaganlarida paydo bo‘ldi. Atama Remy Sharp tomonidan 2009 yilda BarCamp London konferensiyasida kiritilgan. Birinchi ommaviy polifill html5shiv (2009) bo‘ldi — Internet Explorer-da HTML5 teglarini (<section>, <article>, <nav>) qo‘llab-quvvatlovchi kutubxona.

ES6 (2015) va ECMAScriptning yillik yangilanish sikli bilan kerakli polifillar soni oshdi. Har yili standart eski brauzerlar tomonidan qo‘llab-quvvatlanmaydigan yangi metodlarni (Array.includes, String.padStart, Object.fromEntries, Promise.allSettled) qo‘shadi. 2014 yilda es6-shim sifatida boshlangan core-js universal yechimga aylandi. 2026 yilga kelib core-js ES5–ES2025 uchun 5000 dan ortiq polifill modulini o‘z ichiga oladi.

Nimani polifill qilish mumkin va mumkin emas

Polyfill vs transpilyatsiya: farqlar va o‘zaro ta’sir

Transpilyatsiya yangi sintaksisni eskisiga o‘zgartitadi (const → var, () => {} → function() {}). Polyfill yetishmayotgan metodlar va obyektlarni qo‘shadi (Promise, Array.includes). Bu ikki mexanizm bir-birini to‘ldiradi: transpilyatsiya sintaktik moslikni ta’minlaydi, polifillar API to‘liqligini ta’minlaydi. Babel + core-js — to‘liq qo‘llab-quvvatlash uchun standart kombinatsiya.

Babel @babel/preset-env useBuiltIns opsiyasi bilan maqsadli brauzerlar asosida qaysi polifillar kerakligini aniqlaydi. useBuiltIns: “usage” kodda qaysi API-lar ishlatilganligini tahlil qiladi va core-js dan faqat kerakli polifillarni ulaydi. useBuiltIns: “entry” bitta core-js/stable importi orqali maqsadli brauzerlar uchun barcha polifillarni ulaydi.

Misol: Array.prototype.includes uchun polifill

// Polifill mavjudligini tekshirish va qo‘shish
if (typeof Array.prototype.includes !== "function") {
  Object.defineProperty(Array.prototype, "includes", {
    value: function(searchElement, fromIndex) {
      if (this == null) {
        throw new TypeError("Array.prototype.includes called on null or undefined");
      }
      var arr = Object(this);
      var len = arr.length >>> 0;
      if (len === 0) { return false; }
      var start = fromIndex | 0;
      var k = Math.max(start >= 0 ? start : len + start, 0);

      while (k < len) {
        if (arr[k] === searchElement) { return true; }
        k++;
      }
      return false;
    },
    writable: true,
    configurable: true,
  });
}

// Foydalanish — endi istalgan brauzerda xavfsiz
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

Polifill Array.prototype.includes uchun metod Array prototipida aniqlanganligini tekshiradi. Agar yo‘q bo‘lsa — Object.defineProperty orqali writable: true, configurable: true bayroqlari bilan xususiyat yaratadi. Amalga oshirish ES2016 spetsifikatsiyasiga mos keladi: null/undefined tekshiruvi, obyektga aylantirish, manfiy fromIndex bilan ishlash. Polifill qo‘shilgandan so‘ng arr.includes(3) chaqiruvi Internet Explorer 11 ni ham o‘z ichiga olgan barcha brauzerlarda ishlaydi.

core-js: standart polifill kutubxonasi

core-js — TC39 (ECMAScript standarti) ning barcha stage-4 takliflarini qo‘llab-quvvatlovchi eng to‘liq JavaScript polifill kutubxonasi. core-js Promise, Symbol, Map, Set, WeakMap, WeakSet, Array metodlari, String metodlari, Object metodlari, Number metodlari, Math metodlari, Reflect, globalThis va barcha stage-4 proposals uchun polifilllarni o‘z ichiga oladi. Joriy core-js 3.38+ versiyasi ES5–ES2025 ni qamrab oladi.

core-js Babel bilan @babel/preset-env va useBuiltIns opsiyasi orqali integratsiyalanadi. Ushbu integratsiyasiz dasturchi har bir polifillni qo‘lda import qilishi kerak bo‘lardi: import “core-js/stable/array/includes”. @babel/preset-env .browserslistrc dagi maqsadli brauzerlar asosida avtomatik ravishda kerakli importlarni qo‘shadi. Bu bundle hajmini kamaytiradi — faqat kerakli polifillar ulanadi.

Misol: fetch uchun polifill

Fetch API — eng ko‘p polifill qilinadigan Web API lardan biri. Fetchning native amalga oshirilishi Chrome 42+ (2015), Safari 10.1+ (2017), Firefox 39+ (2015) da mavjud, ammo Internet Explorer va eski WebView larda yo‘q. whatwg-fetch polifilli fetch ni XMLHttpRequest orqali emulyatsiya qiladi. Muqobil — isomorphic-fetch (Node.js va brauzer uchun polifill) yoki polifill talab qilmaydigan universal axios kutubxonasidan foydalanish.

// Fetch polifillini faqat eski brauzerlar uchun yuklash
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// Fetch dan foydalanish (polifill va native API bilan ishlaydi)
async function loadData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const json = await response.json();
    return json;
  } catch (error) {
    console.error("Failed to load:", error);
  }
}

Dinamik import fetch polifillini import() orqali yuklash zamonaviy brauzerlarning ortiqcha kod yuklamasligini kafolatlaydi. Polifill asinxron yuklanadi va asosiy oqimni bloklamaydi. Yuklangandan so‘ng self.fetch native amalga oshirishni almashtiradi yoki yetishmayotganini qo‘shadi. Bu progressiv yaxshilash texnikasi: zamonaviy brauzerlar faqat native kod oladi, eskilari — qo‘shimcha polifill.

core-js ni Babel bilan integratsiyalash

// babel.config.js — core-js + preset-env
module.exports = {
  presets: [
    ["@babel/preset-env", {
      useBuiltIns: "usage",
      corejs: {
        version: "3.38",
        proposals: true,
      },
      targets: {
        browsers: ["> 0.5%", "not dead", "not op_mini all"],
      },
    }],
  ],
};

# .browserslistrc — maqsadli brauzerlar
> 0.5%
last 2 versions
not dead
not op_mini all
ie >= 11
not ios_saf < 12

useBuiltIns: “usage” kodni tahlil qiladi va faqat haqiqatda ishlatilgan polifillarni qo‘shadi. corejs.version loyihadagi core-js versiyasini ko‘rsatadi. targets.browsers brauzerlarning minimal darajasini aniqlaydi — brauzerlar qanchalik eski bo‘lsa, shuncha ko‘p polifill ulanadi. .browserslistrc nafaqat Babel, balki Autoprefixer, PostCSS va Stylelint tomonidan ham izchil nishonga olish uchun ishlatiladi.

Polyfill.io va polifillarni dinamik yuklash

Polyfill.io — foydalanuvchi brauzeriga qaysi polifillar kerakligini dinamik aniqlaydigan va faqat ularni qaytaradigan xizmat (va shu nomdagi kutubxona). Polyfill.io brauzer versiyasini aniqlash uchun User-Agent sarlavhasidan foydalanadi va minimal polifillar to‘plamini yetkazib beradi. Bu universal polifill bundle bilan solishtirganda uzatiladigan ma’lumotlar hajmini kamaytiradi.

Polyfill.io ni ulash ilovaning asosiy kodidan oldin <script> tegi orqali amalga oshiriladi. Xizmat User-Agent ni tahlil qiladi va faqat shu brauzer uchun polifillari bo‘lgan JavaScript faylini qaytaradi. Chrome hech qanday polifill olmaydi, IE 11 to‘liq to‘plamni oladi. Bu samaradorlik uchun optimal yondashuv: zamonaviy brauzerlar ortiqcha kod yuklamaydi.

Polyfill.io ni ulash

<!-- Polyfill.io: dinamik yuklash -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise%2CArray.prototype.includes%2CObject.assign%2Cfetch"></script>

<!-- Polyfill.io ning lokal versiyasi -->
<script src="/js/polyfill.js"></script>
<script>
  // fetch uchun feature detection
  if (!self.fetch) {
    loadScript("/js/fetch-polyfill.js");
  }
</script>

Parametr features Polyfill.io URL sida qaysi polifillarni yuklashni ko‘rsatadi. Mumkin qiymatlar: metod nomlari (Array.prototype.includes), global obyektlar (Promise) yoki bayroqlar (es6, es2016). “Default” bayrog‘i zamonaviy JavaScript uchun asosiy to‘plamni ulaydi. Ishlab chiqarish loyihalari uchun Polyfill.io ni o‘z CDN da joylashtirish yoki mavjudlikni nazorat qilish uchun kutubxonaning lokal versiyasidan foydalanish tavsiya etiladi.

Mobil ilovalar va WebView da polifillar

WebView mobil ilovalarda (Android WebView, iOS da WKWebView) — polifillar uchun maxsus muhit. WebView versiyasi operatsion tizim versiyasiga va o‘rnatilgan Chrome System WebView (Android) yoki iOS Safari dan WKWebView yangilanishiga bog‘liq. Android ning eski versiyalarida (4.4, 5.0) WebView Chromium 30–37 ga asoslangan — fetch, Promise, IntersectionObserver qo‘llab-quvvatlanmaydi.

React Native JavaScriptCore (iOS) yoki Hermes (Android) dan foydalanadi — bu dvigatellar ES6+ ni turlicha amalga oshiradi. iOS da JavaScriptCore aksariyat ES6 funksiyalarini qo‘llab-quvvatlaydi, lekin ba’zi stage-3 takliflari bo‘lmasligi mumkin. Hermes (React Native 0.70+ da standart) ES standartining cheklangan to‘plamini qo‘llab-quvvatlaydi — uning uchun polifillar majburiydir.

WebView da qo‘llab-quvvatlashni tekshirish

// WebView uchun feature detection
const polyfills = [];

// Promise
if (typeof Promise === "undefined") {
  polyfills.push("Promise");
}

// Fetch API
if (typeof self.fetch === "undefined") {
  polyfills.push("fetch");
}

// IntersectionObserver (kechikib yuklash uchun kerak)
if (typeof IntersectionObserver === "undefined") {
  polyfills.push("IntersectionObserver");
}

// Polifillarni dinamik yuklash
if (polyfills.length > 0) {
  const script = document.createElement("script");
  script.src = "https://cdn.polyfill.io/v3/polyfill.min.js"
    + "?features=" + polyfills.join(",");
  document.head.appendChild(script);
}

Feature detection WebView uchun muhim API larning (Promise, fetch, IntersectionObserver) mavjudligini tekshiradi va faqat yetishmayotganlari uchun polifillarni dinamik yuklaydi. Bu zamonaviy WebView (Android 12 da Chrome 100+) ortiqcha kod yuklamasligini va eski WebView (Android 5.0) kerakli qo‘llab-quvvatlashni olishini kafolatlaydi.