Polyfill: यह क्या है, कार्य सिद्धांत और API एमुलेशन के लिए लाइब्रेरीज़

Polyfill क्या है?

Polyfill कोड का एक टुकड़ा (आमतौर पर JavaScript) है जो उस कार्यक्षमता को लागू करता है जिसे रनटाइम वातावरण मूल रूप से समर्थन नहीं करता। यह शब्द रेमी शार्प द्वारा 2009 में एक शब्दों के खेल के रूप में गढ़ा गया था: Polyfill, Polyfilla के समान है, जो दीवार में दरारें भरने वाली पुट्टी है। Polyfill मानक और विशिष्ट ब्राउज़र या रनटाइम में उसके समर्थन के बीच अंतराल को भरता है।

Polyfill मौजूदा कोड को संशोधित नहीं करता — यह रनटाइम वातावरण का विस्तार करता है। यदि कोई ब्राउज़र Array.prototype.includes का समर्थन नहीं करता है, तो polyfill मुख्य कोड निष्पादित होने से पहले इस विधि को Array प्रोटोटाइप में जोड़ता है। Polyfills नए ग्लोबल ऑब्जेक्ट (Promise, Map, Set, Symbol), स्टैटिक विधियाँ (Array.from, Object.assign) और प्रोटोटाइप विधियाँ एम्युलेट कर सकते हैं।

फ़ीचर डिटेक्शन polyfill स्थापित करने से पहले एक अनिवार्य तंत्र है। यूज़र-एजेंट (कौन सा ब्राउज़र) की जाँच करने के बजाय, विधि की उपस्थिति की जाँच करनी चाहिए: if (!Array.prototype.includes) { Array.prototype.includes = ... }. यह सुनिश्चित करता है कि यदि मूल कार्यान्वयन पहले से मौजूद है तो polyfill उसे ओवरराइट न करे। Google Analytics और अन्य सेवाएँ विश्लेषण के लिए API समर्थन डेटा एकत्र करती हैं।

Polyfills कब उभरे

पहली polyfills Internet Explorer 6–8 युग (2005–2009) में दिखाई दीं, जब डेवलपर्स ने W3C मानकों और ब्राउज़र कार्यान्वयन के बीच अंतर पाया। यह शब्द रेमी शार्प द्वारा 2009 में BarCamp London में पेश किया गया था। पहली सामूहिक polyfill html5shiv (2009) थी — एक लाइब्रेरी जो Internet Explorer में HTML5 टैग (<section>, <article>, <nav>) के लिए समर्थन जोड़ती है।

ES6 (2015) और वार्षिक ECMAScript अपडेट चक्र के आगमन के साथ, आवश्यक polyfills की संख्या बढ़ गई। हर साल मानक नई विधियाँ (Array.includes, String.padStart, Object.fromEntries, Promise.allSettled) जोड़ता है जो पुराने ब्राउज़रों द्वारा समर्थित नहीं हैं। core-js, जो 2014 में es6-shim के रूप में शुरू हुआ, एक सार्वभौमिक समाधान बन गया। 2026 तक, core-js में ES5–ES2025 के लिए 5000 से अधिक polyfill मॉड्यूल हैं।

क्या Polyfill किया जा सकता है और क्या नहीं

Polyfill बनाम ट्रांसपाइलेशन: अंतर और परस्पर क्रिया

ट्रांसपाइलेशन नए सिंटैक्स को पुराने सिंटैक्स में बदलता है (const → var, () => {} → function() {}). Polyfill गायब विधियों और ऑब्जेक्ट को जोड़ता है (Promise, Array.includes)। ये दो तंत्र एक दूसरे के पूरक हैं: ट्रांसपाइलेशन कोड को सिंटैक्टिक रूप से संगत बनाता है, polyfills API पूर्णता सुनिश्चित करते हैं। Babel + core-js पूर्ण समर्थन के लिए मानक संयोजन है।

Babel @babel/preset-env विकल्प useBuiltIns के साथ यह निर्धारित करता है कि लक्ष्य ब्राउज़रों के आधार पर किन polyfills की आवश्यकता है। useBuiltIns: "usage" विश्लेषण करता है कि कोड में किन API का उपयोग किया गया है और core-js से केवल आवश्यक polyfills आयात करता है। useBuiltIns: "entry" एकल core-js/stable आयात के माध्यम से लक्ष्य ब्राउज़रों के लिए सभी polyfills आयात करता है।

उदाहरण: Array.prototype.includes के लिए polyfill

// अस्तित्व की जाँच और polyfill जोड़ना
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,
  });
}

// उपयोग — अब किसी भी ब्राउज़र में सुरक्षित
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

Polyfill Array.prototype.includes के लिए जाँचता है कि क्या विधि Array प्रोटोटाइप में परिभाषित है। यदि नहीं, तो यह writable: true, configurable: true ध्वज के साथ Object.defineProperty के माध्यम से गुण बनाता है। कार्यान्वयन ES2016 विनिर्देश का पालन करता है: null/undefined जाँच, ऑब्जेक्ट में रूपांतरण, नकारात्मक fromIndex को संभालना। polyfill जोड़ने के बाद, arr.includes(3) कॉल Internet Explorer 11 सहित सभी ब्राउज़रों में काम करता है।

core-js: मानक Polyfill लाइब्रेरी

core-js सबसे व्यापक JavaScript polyfill लाइब्रेरी है, जो TC39 के सभी stage-4 प्रस्तावों (ECMAScript मानक) का समर्थन करती है। core-js में Promise, Symbol, Map, Set, WeakMap, WeakSet, Array विधियाँ, String विधियाँ, Object विधियाँ, Number विधियाँ, Math विधियाँ, Reflect, globalThis और सभी stage-4 प्रस्तावों के लिए polyfills शामिल हैं। वर्तमान संस्करण core-js 3.38+ ES5–ES2025 को कवर करता है।

core-js @babel/preset-env और useBuiltIns विकल्प के माध्यम से Babel के साथ एकीकृत होता है। इस एकीकरण के बिना, डेवलपर्स को मैन्युअल रूप से प्रत्येक polyfill आयात करना होगा: import "core-js/stable/array/includes"। @babel/preset-env .browserslistrc से लक्ष्य ब्राउज़रों के आधार पर स्वचालित रूप से आवश्यक आयात जोड़ता है। यह बंडल आकार को कम करता है — केवल आवश्यक polyfills शामिल की जाती हैं।

उदाहरण: fetch के लिए polyfill

Fetch API सबसे अधिक polyfill किए जाने वाले Web API में से एक है। मूल fetch कार्यान्वयन Chrome 42+ (2015), Safari 10.1+ (2017), Firefox 39+ (2015) में उपलब्ध है, लेकिन Internet Explorer और पुराने WebViews में अनुपस्थित है। whatwg-fetch polyfill XMLHttpRequest के माध्यम से fetch को एम्युलेट करता है। विकल्प — isomorphic-fetch (Node.js और ब्राउज़र के लिए polyfill) या सार्वभौमिक axios लाइब्रेरी का उपयोग करना, जिसे polyfills की आवश्यकता नहीं है।

// केवल पुराने ब्राउज़रों के लिए fetch polyfill लोड करना
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// fetch का उपयोग (polyfill और मूल API दोनों के साथ काम करता है)
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);
  }
}

डायनामिक import import() के माध्यम से fetch polyfill का सुनिश्चित करता है कि आधुनिक ब्राउज़र अनावश्यक कोड लोड न करें। Polyfill एसिंक्रोनस रूप से लोड होता है और मुख्य थ्रेड को ब्लॉक नहीं करता। लोड करने के बाद, self.fetch मूल कार्यान्वयन को बदल देता है या गायब कार्यान्वयन जोड़ता है। यह प्रगतिशील संवर्धन तकनीक है: आधुनिक ब्राउज़र केवल मूल कोड प्राप्त करते हैं, पुराने ब्राउज़र अतिरिक्त polyfill प्राप्त करते हैं।

Babel के साथ core-js का एकीकरण

// 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 — लक्ष्य ब्राउज़र
> 0.5%
last 2 versions
not dead
not op_mini all
ie >= 11
not ios_saf < 12

useBuiltIns: "usage" कोड का विश्लेषण करता है और केवल वास्तव में उपयोग किए जाने वाले polyfills को जोड़ता है। corejs.version प्रोजेक्ट में core-js संस्करण निर्दिष्ट करता है। targets.browsers न्यूनतम ब्राउज़र स्तर को परिभाषित करता है — लक्ष्य ब्राउज़र जितने पुराने होंगे, उतने अधिक polyfills शामिल होंगे। .browserslistrc का उपयोग न केवल Babel द्वारा बल्कि Autoprefixer, PostCSS और Stylelint द्वारा भी संगत लक्ष्यीकरण के लिए किया जाता है।

Polyfill.io और गतिशील Polyfill लोडिंग

Polyfill.io एक सेवा (और इसी नाम की लाइब्रेरी) है जो गतिशील रूप से निर्धारित करती है कि उपयोगकर्ता के ब्राउज़र को किन polyfills की आवश्यकता है और केवल वे लौटाती है। Polyfill.io, User-Agent हेडर का उपयोग करके ब्राउज़र संस्करण निर्धारित करता है और polyfills का न्यूनतम सेट प्रदान करता है। यह सार्वभौमिक polyfill बंडल की तुलना में स्थानांतरित डेटा की मात्रा को कम करता है।

Polyfill.io को जोड़ना मुख्य एप्लिकेशन कोड से पहले <script> टैग के माध्यम से किया जाता है। सेवा User-Agent का विश्लेषण करती है और केवल उस ब्राउज़र के लिए polyfills के साथ एक JavaScript फ़ाइल लौटाती है। Chrome को कोई polyfill नहीं मिलेगा, IE 11 को पूरा सेट मिलेगा। यह प्रदर्शन के लिए एक इष्टतम दृष्टिकोण है: आधुनिक ब्राउज़र अनावश्यक कोड लोड नहीं करते।

Polyfill.io को जोड़ना

<!-- Polyfill.io: गतिशील लोडिंग -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise%2CArray.prototype.includes%2CObject.assign%2Cfetch"></script>

<!-- स्थानीय Polyfill.io संस्करण -->
<script src="/js/polyfill.js"></script>
<script>
  // feature detection for fetch
  if (!self.fetch) {
    loadScript("/js/fetch-polyfill.js");
  }
</script>

URL में features पैरामीटर Polyfill.io में निर्दिष्ट करता है कि कौन से polyfills लोड करने हैं। संभावित मान: विधि नाम (Array.prototype.includes), ग्लोबल ऑब्जेक्ट (Promise), या ध्वज (es6, es2016)। "default" ध्वज आधुनिक JavaScript के लिए एक बुनियादी सेट लोड करता है। उत्पादन परियोजनाओं के लिए, Polyfill.io को अपने स्वयं के CDN पर होस्ट करने या उपलब्धता नियंत्रण के लिए लाइब्रेरी के स्थानीय संस्करण का उपयोग करने की अनुशंसा की जाती है।

मोबाइल एप्लिकेशन और WebView में Polyfills

WebView मोबाइल एप्लिकेशन में (Android WebView, iOS पर WKWebView) polyfills के लिए एक विशेष वातावरण है। WebView संस्करण OS संस्करण और स्थापित Chrome System WebView अपडेट (Android) या iOS Safari से WKWebView पर निर्भर करता है। Android (4.4, 5.0) के पुराने संस्करणों में, WebView Chromium 30–37 पर आधारित है — fetch, Promise, IntersectionObserver के समर्थन के बिना।

React Native JavaScriptCore (iOS) या Hermes (Android) का उपयोग करता है — ये इंजन ES6+ को अलग-अलग तरीके से लागू करते हैं। iOS पर JavaScriptCore अधिकांश ES6 सुविधाओं का समर्थन करता है लेकिन कुछ stage-3 प्रस्तावों की कमी हो सकती है। Hermes (React Native 0.70+ में डिफ़ॉल्ट रूप से उपयोग किया जाता है) ES मानक के एक सीमित सेट का समर्थन करता है — इसके लिए polyfills अनिवार्य हैं।

WebView में समर्थन की जाँच

// WebView के लिए feature detection
const polyfills = [];

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

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

// IntersectionObserver (आलसी लोडिंग के लिए आवश्यक)
if (typeof IntersectionObserver === "undefined") {
  polyfills.push("IntersectionObserver");
}

// गतिशील polyfill लोडिंग
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 के लिए महत्वपूर्ण API (Promise, fetch, IntersectionObserver) की उपस्थिति की जाँच करता है और केवल गायब API के लिए गतिशील रूप से polyfills लोड करता है। यह सुनिश्चित करता है कि आधुनिक WebViews (Android 12 पर Chrome 100+) अनावश्यक कोड लोड न करें, जबकि पुराने WebViews (Android 5.0) को आवश्यक समर्थन मिले।