कुछ दिन पहले, हमें हमारे संगठन की टीम चैट में एक प्राथमिकता संदेश प्राप्त हुआ, जिसमें लिखा था: सुरक्षा भेद्यता पाई गई - पॉलीफ़िल जावास्क्रिप्ट का पता चला - उच्च।
संदर्भ देने के लिए, मैं एक प्रमुख बैंकिंग फर्म के लिए काम करता हूं और जैसा कि आप जानते होंगे, बैंकिंग और सुरक्षा कमजोरियां प्रमुख शत्रुओं की तरह हैं। इसलिए, हमने मामले की गहराई से जांच शुरू की और इसे कुछ ही घंटों में सुलझा लिया, जिसके बारे में मैं आगे चर्चा करूंगा। लेकिन अच्छी (या सबसे बुरी?) बात यह है कि जब मैंने शुरू में इस मुद्दे के बारे में गूगल पर खोजा, तो जो खोज परिणाम सामने आए, उन्होंने मुझे बाकी दिन बांधे रखा!

आइए आधुनिक और पुराने ब्राउज़र के बीच विसंगति पर प्रकाश डालें। यहां नवीनतम क्रोम रिलीज़ बनाम इंटरनेट एक्सप्लोरर (IE) 9 की तुलना है। आधुनिक ब्राउज़र बहुत सारी ES6 सुविधाओं का समर्थन करते हैं और साथ ही, IE9 और IE11 भी, जो अभी भी कई कंपनियों द्वारा उपयोग किए जाते हैं, बमुश्किल किसी ES6 सुविधाओं का समर्थन करते हैं .
यहां transpiling की अवधारणा मदद करने के लिए आती है, जो जावास्क्रिप्ट के संदर्भ में, आधुनिक जावास्क्रिप्ट (ES6/ES2015 और उससे आगे) में लिखे गए स्रोत कोड को ES5 जैसे पुराने संस्करण में परिवर्तित करने को संदर्भित करता है। , जो पुराने ब्राउज़रों द्वारा व्यापक रूप से समर्थित है। एक बहुत लोकप्रिय ट्रांसपिलर है Babel, जो सिंटैक्स परिवर्तन, कोड बंडलिंग (वेबपैक के साथ) और JSX के लिए समर्थन (हमारे प्यारे दोस्त, रिएक्ट के लिए!) जैसी कई सुविधाएँ प्रदान करता है।

अब, ट्रांसपिलर का उपयोग उन स्थानों पर बहुत आम है जहां बहुत अधिक आधुनिक वाक्यविन्यास है, और विभिन्न वातावरणों में अनुकूलता सुनिश्चित करनी होती है। ध्यान दें कि संपूर्ण कोडबेस को एक अलग संस्करण में परिवर्तित करने के लिए बहुत अधिक समय की आवश्यकता होती है और बैबल जैसी चीज़ों के लिए एक निर्माण प्रक्रिया और अतिरिक्त कॉन्फ़िगरेशन स्थापित करने की भी आवश्यकता होती है। यह अनकहा है कि, वाक्यात्मक सुविधाओं को परिवर्तित करने के साथ-साथ, पुराने ब्राउज़र में समान सुविधा प्रतिकृति का विस्तार करने के लिए एपीआई कार्यक्षमता भी शामिल है।

बैबेल के संदर्भ में, इसमें बहुत सारे पैकेज शामिल हैं, जो विभिन्न प्रकार की कार्यक्षमताओं जैसे ईएस6 कक्षाओं, एरो फ़ंक्शंस आदि को समकक्ष जेएस कोड में बदलने के लिए प्लगइन प्रदान करते हैं। इनमें से, यह अपना स्वयं का "पॉलीफ़िल" पैकेज भी प्रदान करता है।

Polyfills कोड के टुकड़े हैं जो पुराने ब्राउज़रों को समान/लगभग समान जेएस कार्यक्षमता प्रदान करने में सक्षम बनाते हैं, जो वे मूल रूप से प्रदान नहीं करते हैं, जो नए ब्राउज़र संस्करणों में दिखाया गया है। यहां एक त्वरित वीडियो उदाहरण और बहुत ही सरल कार्यान्वयन है।

अब कोई सोच सकता है कि ट्रांसपिलर और पॉलीफ़िल में क्या अंतर है? खैर, पॉलीफ़िल पूरे कोडबेस को ट्रांसपिलर द्वारा किए गए पुराने-ब्राउज़र-अनुकूल संस्करण में बदलने के बजाय विशिष्ट एपीआई का अनुकरण करने पर ध्यान केंद्रित करते हैं जो गायब हैं। यह अधिक विस्तृत दृष्टिकोण की अनुमति देता है और निश्चित रूप से, इसे अधिक कुशल और प्रदर्शनशील बनाता है।

इससे हमें इस मुद्दे पर पहुंचने के लिए पर्याप्त पृष्ठभूमि मिलनी चाहिए कि जब मैं इसे लिख रहा हूं, तब तक मैं एक दिन के लिए पॉलीफ़िल के बारे में क्यों फंस गया था।

अब, बैबेल के पास babel/polyfill नामक एक पैकेज है जिसमें 2 लाइब्रेरी शामिल हैं: कोर-जेएस और रीजेनरेटर-रनटाइम। प्रारंभ में, इस पैकेज को आयात करने से सभी पॉलीफ़िल क्रियान्वित हो जाएंगे।

import '@babel/polyfill';

लेकिन सब कुछ लाने से, चाहे आपका प्रोजेक्ट उनका उपयोग करेगा या नहीं, बंडल आकार में वृद्धि हुई और विश्व स्तर पर पॉलीफ़िल इंजेक्ट करने से वस्तुओं में टकराव हो सकता है।
इसके कारण पैकेज को अस्वीकार कर दिया गया और बैबेल ने सीधे
द्वारा कोर-जेएस लाइब्रेरी का उपयोग करने की सिफारिश की। चरण 1: बेबल कॉन्फ़िगरेशन को संशोधित करना

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

चरण 2: अपने प्रोजेक्ट में उपयोग किए जाने वाले पॉलीफ़िल को मैन्युअल रूप से आयात करें

import "core-js/es/array/includes";
import "core-js/es/promise";

इस प्रकार, मेमोरी की बचत होती है और अनावश्यक कोड कम होता है।

अब, यह एक भाग का अंत है, अपने आप में इतना चिंताजनक नहीं है, लेकिन एक परियोजना के संबंध में निश्चित रूप से महत्वपूर्ण है, निर्भरता में बदलाव के साथ अद्यतित रहना, अपने ग्राहकों को बेहतर अनुभव प्रदान करना।

लेकिन। यह सब नहीं है।

हम एक बड़े हमले पर चर्चा करने वाले हैं जो हाल ही में हुआ और जिसने पूरे इंटरनेट को हिलाकर रख दिया और उन्हें अपने कोडबेस को खंगालने पर मजबूर कर दिया।
और, इसमें वह चीज़ शामिल है जिसकी हमने यहां चर्चा की है। तो दूसरे भाग के लिए बने रहें!