Polyfill: Nedir, Çalışma Prensibi ve API Emülasyonu için Kütüphaneler

Polyfill Nedir?

Polyfill, çalışma zamanı ortamının yerel olarak desteklemediği işlevselliği uygulayan bir kod parçasıdır (genellikle JavaScript). Terim, 2009 yılında Remy Sharp tarafından bir kelime oyunu olarak türetilmiştir: Polyfill, duvardaki çatlakları dolduran bir macun olan Polyfilla'ya benzer. Polyfill, standart ile belirli bir tarayıcı veya çalışma zamanındaki desteği arasındaki boşlukları doldurur.

Polyfill mevcut kodu değiştirmez — çalışma zamanı ortamını genişletir. Bir tarayıcı Array.prototype.includes'i desteklemiyorsa, polyfill ana kod yürütülmeden önce bu yöntemi Array prototipine ekler. Polyfill'ler yeni global nesneleri (Promise, Map, Set, Symbol), statik yöntemleri (Array.from, Object.assign) ve prototip yöntemlerini taklit edebilir.

Özellik algılama, bir polyfill yüklemeden önce zorunlu bir mekanizmadır. User-agent (hangi tarayıcı) kontrol etmek yerine, yöntemin varlığı kontrol edilmelidir: if (!Array.prototype.includes) { Array.prototype.includes = ... }. Bu, yerel uygulama zaten varsa polyfill'in onu geçersiz kılmamasını sağlar. Google Analytics ve diğer hizmetler, analiz için API destek verilerini toplar.

Polyfill'ler Ne Zaman Ortaya Çıktı

İlk polyfill'ler Internet Explorer 6–8 döneminde (2005–2009), geliştiricilerin W3C standartları ile tarayıcı uygulamaları arasında bir boşluk keşfetmesiyle ortaya çıktı. Terim, Remy Sharp tarafından 2009'da BarCamp London'da tanıtıldı. İlk kitlesel polyfill, Internet Explorer'da HTML5 etiketleri (<section>, <article>, <nav>) için destek ekleyen bir kütüphane olan html5shiv (2009) idi.

ES6'nın (2015) ve yıllık ECMAScript güncelleme döngüsünün gelmesiyle birlikte, gerekli polyfill sayısı arttı. Her yıl standart, eski tarayıcılar tarafından desteklenmeyen yeni yöntemler (Array.includes, String.padStart, Object.fromEntries, Promise.allSettled) ekler. 2014'te es6-shim olarak başlatılan core-js, evrensel bir çözüm haline geldi. 2026 itibarıyla core-js, ES5–ES2025 için 5.000'den fazla polyfill modülü içermektedir.

Neler Polyfill Edilebilir ve Edilemez

Polyfill vs Transpilasyon: Farklar ve Etkileşim

Transpilasyon yeni sözdizimini eski sözdizimine dönüştürür (const → var, () => {} → function() {}). Polyfill eksik yöntemleri ve nesneleri ekler (Promise, Array.includes). Bu iki mekanizma birbirini tamamlar: transpilasyon kodu sözdizimsel olarak uyumlu hale getirir, polyfill'ler API bütünlüğünü sağlar. Babel + core-js, tam destek için standart kombinasyondur.

Babel @babel/preset-env, useBuiltIns seçeneğiyle hedef tarayıcılara göre hangi polyfill'lerin gerekli olduğunu belirler. useBuiltIns: "usage" kodda hangi API'lerin kullanıldığını analiz eder ve core-js'den yalnızca gerekli polyfill'leri içe aktarır. useBuiltIns: "entry" tek bir core-js/stable içe aktarımıyla hedef tarayıcılar için tüm polyfill'leri içe aktarır.

Örnek: Array.prototype.includes için polyfill

// Polyfill'in varlığını kontrol etme ve ekleme
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,
  });
}

// Kullanım — artık her tarayıcıda güvenli
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

Array.prototype.includes için polyfill, yöntemin Array prototipinde tanımlı olup olmadığını kontrol eder. Tanımlı değilse, Object.defineProperty ile writable: true, configurable: true bayraklarıyla özelliği oluşturur. Uygulama ES2016 spesifikasyonunu izler: null/undefined kontrolü, nesneye dönüştürme, negatif fromIndex işleme. Polyfill eklendikten sonra, arr.includes(3) çağrısı Internet Explorer 11 dahil tüm tarayıcılarda çalışır.

core-js: Standart Polyfill Kütüphanesi

core-js, tüm TC39 stage-4 önerilerini (ECMAScript standardı) destekleyen en kapsamlı JavaScript polyfill kütüphanesidir. core-js, Promise, Symbol, Map, Set, WeakMap, WeakSet, Array yöntemleri, String yöntemleri, Object yöntemleri, Number yöntemleri, Math yöntemleri, Reflect, globalThis ve tüm stage-4 önerileri için polyfill'ler içerir. Mevcut sürüm core-js 3.38+ ES5–ES2025'i kapsar.

core-js, @babel/preset-env ve useBuiltIns seçeneği aracılığıyla Babel ile entegre olur. Bu entegrasyon olmadan, geliştiricilerin her polyfill'i manuel olarak içe aktarması gerekirdi: import "core-js/stable/array/includes". @babel/preset-env, .browserslistrc'den hedef tarayıcılara göre gerekli içe aktarımları otomatik olarak ekler. Bu, paket boyutunu azaltır — yalnızca gerekli polyfill'ler dahil edilir.

Örnek: fetch için polyfill

Fetch API, en sık polyfill yapılan Web API'lerinden biridir. Yerel fetch uygulaması Chrome 42+ (2015), Safari 10.1+ (2017), Firefox 39+ (2015)'te mevcuttur, ancak Internet Explorer ve eski WebView'larda bulunmaz. whatwg-fetch polyfill'i, XMLHttpRequest aracılığıyla fetch'i taklit eder. Alternatif — isomorphic-fetch (Node.js ve tarayıcı için bir polyfill) veya polyfill gerektirmeyen evrensel axios kütüphanesini kullanmak.

// Yalnızca eski tarayıcılar için fetch polyfill'i yükleme
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// Fetch kullanımı (polyfill ve yerel API ile çalışır)
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 içe aktarım import() ile fetch polyfill'inin, modern tarayıcıların gereksiz kod yüklememesini sağlar. Polyfill asenkron olarak yüklenir ve ana iş parçacığını engellemez. Yüklemeden sonra, self.fetch yerel uygulamayı değiştirir veya eksik olanı ekler. Bu, aşamalı iyileştirme tekniğidir: modern tarayıcılar yalnızca yerel kod alır, eski tarayıcılar ek polyfill alır.

core-js'in Babel ile Entegrasyonu

// 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 — hedef tarayıcılar
> 0.5%
last 2 versions
not dead
not op_mini all
ie >= 11
not ios_saf < 12

useBuiltIns: "usage" kodu analiz eder ve yalnızca gerçekten kullanılan polyfill'leri ekler. corejs.version, projedeki core-js sürümünü belirtir. targets.browsers, minimum tarayıcı seviyesini tanımlar — hedef tarayıcılar ne kadar eskiyse, o kadar fazla polyfill dahil edilir. .browserslistrc yalnızca Babel tarafından değil, aynı zamanda Autoprefixer, PostCSS ve Stylelint tarafından da tutarlı hedefleme için kullanılır.

Polyfill.io ve Dinamik Polyfill Yükleme

Polyfill.io, kullanıcının tarayıcısının hangi polyfill'lere ihtiyacı olduğunu dinamik olarak belirleyen ve yalnızca bunları döndüren bir hizmettir (ve aynı adlı kütüphane). Polyfill.io, tarayıcı sürümünü belirlemek için User-Agent başlığını kullanır ve minimum bir polyfill seti sağlar. Bu, evrensel bir polyfill paketine kıyasla aktarılan veri miktarını azaltır.

Polyfill.io bağlantısı, ana uygulama kodundan önce bir <script> etiketi aracılığıyla yapılır. Hizmet, User-Agent'ı analiz eder ve yalnızca o tarayıcı için polyfill'ler içeren bir JavaScript dosyası döndürür. Chrome hiçbir polyfill almaz, IE 11 tam seti alır. Bu, performans için optimal bir yaklaşımdır: modern tarayıcılar gereksiz kod yüklemez.

Polyfill.io Bağlantısı

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

<!-- Yerel Polyfill.io sürümü -->
<script src="/js/polyfill.js"></script>
<script>
  // feature detection for fetch
  if (!self.fetch) {
    loadScript("/js/fetch-polyfill.js");
  }
</script>

URL'deki features parametresi Polyfill.io'da hangi polyfill'lerin yükleneceğini belirtir. Olası değerler: yöntem adları (Array.prototype.includes), global nesneler (Promise) veya bayraklar (es6, es2016). "default" bayrağı, modern JavaScript için temel bir set yükler. Üretim projeleri için, Polyfill.io'yu kendi CDN'nizde barındırmanız veya kullanılabilirlik kontrolü için kütüphanenin yerel bir sürümünü kullanmanız önerilir.

Mobil Uygulamalarda ve WebView'da Polyfill'ler

WebView mobil uygulamalarda (Android WebView, iOS'ta WKWebView) polyfill'ler için özel bir ortamdır. WebView sürümü, işletim sistemi sürümüne ve yüklü Chrome System WebView güncellemesine (Android) veya iOS Safari'den WKWebView'a bağlıdır. Eski Android sürümlerinde (4.4, 5.0), WebView Chromium 30–37'yi temel alır — fetch, Promise, IntersectionObserver desteği olmadan.

React Native, JavaScriptCore (iOS) veya Hermes (Android) kullanır — bu motorlar ES6+'yı farklı şekilde uygular. iOS'ta JavaScriptCore çoğu ES6 özelliğini destekler ancak bazı stage-3 önerilerinden yoksun olabilir. Hermes (React Native 0.70+'da varsayılan olarak kullanılır) ES standardının sınırlı bir setini destekler — bunun için polyfill'ler zorunludur.

WebView'da Desteği Kontrol Etme

// WebView için feature detection
const polyfills = [];

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

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

// IntersectionObserver (yavaş yükleme için gerekli)
if (typeof IntersectionObserver === "undefined") {
  polyfills.push("IntersectionObserver");
}

// Dinamik polyfill yükleme
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);
}

WebView için özellik algılama, kritik API'lerin (Promise, fetch, IntersectionObserver) varlığını kontrol eder ve yalnızca eksik olanlar için dinamik olarak polyfill'ler yükler. Bu, modern WebView'ların (Android 12'de Chrome 100+) gereksiz kod yüklememesini, eski WebView'ların (Android 5.0) ise gerekli desteği almasını sağlar.