सभी प्रमुख ब्राउज़र पर अच्छी तरह से काम करने वाली वेबसाइटें बनाना, खुले वेब नेटवर्क का मुख्य सिद्धांत है. हालांकि, इसका मतलब यह पक्का करने के लिए एक और काम है कि आप जो भी कोड लिखेंगे वह हर उस ब्राउज़र पर काम करता है जिसे आपको टारगेट करना है. अगर आपको JavaScript भाषा की नई सुविधाओं का इस्तेमाल करना है, तो आपको इन सुविधाओं को उन ब्राउज़र पर पुराने सिस्टम के साथ काम करने वाले फ़ॉर्मैट में ट्रांसपाइल करना होगा जिन पर ये सुविधाएं काम नहीं करतीं.
Babel, कोड को कंपाइल करने के लिए सबसे ज़्यादा इस्तेमाल किया जाने वाला टूल है. इसमें ऐसे कोड में नया सिंटैक्स होता है जिसे अलग-अलग ब्राउज़र और एनवायरमेंट
(जैसे कि Node) समझ सकते हैं. यह गाइड मानता है कि आप Nearby का इस्तेमाल कर रहे हैं. इसलिए, अगर आपने पहले से इस सुविधा को अपने ऐप्लिकेशन में शामिल नहीं किया है, तो इसके लिए आपको सेटअप से जुड़े निर्देशों का पालन करना होगा. अगर अपने ऐप्लिकेशन में मॉड्यूल बंडलर के तौर पर वेबपैक का इस्तेमाल किया जा रहा है, तो Build Systems में webpack
चुनें.
बेबल का इस्तेमाल सिर्फ़ अपने उपयोगकर्ताओं के लिए ज़रूरी जानकारी को ट्रांसपाइल करने के लिए किया जा सकता है. इसके लिए ज़रूरी है कि:
- पता लगाएं कि आपको किन ब्राउज़र को टारगेट करना है.
- सही ब्राउज़र टारगेट के साथ
@babel/preset-envका इस्तेमाल करें. <script type="module">का इस्तेमाल करके, ट्रांसपाइल किया गया कोड उन ब्राउज़र को भेजें जिन्हें इसकी ज़रूरत नहीं है.
उन ब्राउज़र की पहचान करें जिन्हें आपको टारगेट करना है
अपने ऐप्लिकेशन में कोड को ट्रांसपाइल करने का तरीका बदलने से पहले, आपको ऐप्लिकेशन को ऐक्सेस करने वाले ब्राउज़र की पहचान करनी होगी. इस बात का विश्लेषण करें कि उपयोगकर्ता फ़िलहाल किन ब्राउज़र का इस्तेमाल कर रहे हैं और किन ब्राउज़र को टारगेट करके, सोच-समझकर फ़ैसला लिया जा सकता है.
@babel/preset-env का इस्तेमाल करें
ट्रांसपिल करने पर इस्तेमाल होने वाले कोड से आम तौर पर ऐसी फ़ाइल बनती है जिसका साइज़, मूल फ़ाइल के साइज़ से बड़ा होता है. अपने कंपाइलेशन को कम से कम करके, उस वेब पेज की परफ़ॉर्मेंस को बेहतर बनाने के लिए अपने बंडल का साइज़ कम किया जा सकता है.
आपके द्वारा उपयोग की जा रही कुछ भाषा सुविधाओं को चुनिंदा रूप से कंपाइल करने के लिए विशिष्ट प्लग इन शामिल करने के बजाय, Nearby ऐसे कई प्रीसेट उपलब्ध कराता है जो प्लग इन को एक साथ बंडल कर देते हैं. आपको जिन ब्राउज़र को टारगेट करना है सिर्फ़ उनके लिए ज़रूरी ट्रांसफ़ॉर्म और पॉलीफ़िल को शामिल करने के लिए @babel/preset-env का इस्तेमाल करें.
अपनी Nearby कॉन्फ़िगरेशन फ़ाइल .babelrc में, @babel/preset-env को presets कलेक्शन में शामिल करें:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
browsers फ़ील्ड में सही क्वेरी जोड़कर यह तय करने के लिए कि आपको ब्राउज़र के कौनसे वर्शन शामिल करने हैं, targets फ़ील्ड का इस्तेमाल करें. @babel/preset-env
ब्राउज़रलिस्ट के साथ इंटिग्रेट होता है. यह एक ओपन-सोर्स कॉन्फ़िगरेशन है, जिसे ब्राउज़र टारगेटिंग के लिए अलग-अलग टूल के बीच शेयर किया जाता है. साथ काम करने वाली क्वेरी की पूरी सूची ब्राउज़र सूची दस्तावेज़ में मौजूद है.
दूसरा विकल्प यह है कि आप .browserslistrc फ़ाइल का इस्तेमाल करके, उन एनवायरमेंट की सूची बनाएं जिन्हें आपको टारगेट करना है.
">0.25%" वैल्यू की मदद से, बेबल ब्राउज़र को सिर्फ़ उन ब्राउज़र पर काम करने के लिए ज़रूरी बदलावों को शामिल करने के लिए कहा जाता है जो दुनिया भर में इस्तेमाल का 0.25% से ज़्यादा हिस्सा बनाते हैं. इससे यह पक्का होता है कि आपके बंडल में उन ब्राउज़र के लिए ग़ैर-ज़रूरी ट्रांसपाइल किया गया कोड शामिल न हो जिन्हें
बहुत कम उपयोगकर्ता इस्तेमाल करते हैं.
ज़्यादातर मामलों में, नीचे दिए गए कॉन्फ़िगरेशन का इस्तेमाल करने के बजाय, यह तरीका बेहतर है:
"targets": "last 2 versions"
"last 2 versions" वैल्यू हर ब्राउज़र के आखिरी दो वर्शन के लिए आपके कोड को ट्रांसपाइल करती है. इसका मतलब है कि Internet Explorer जैसे बंद किए गए ब्राउज़र के लिए भी सहायता उपलब्ध कराई जाएगी.
अगर आपको नहीं लगता कि ये ब्राउज़र आपके ऐप्लिकेशन को ऐक्सेस करने के लिए इन ब्राउज़र का इस्तेमाल करेंगे, तो इससे आपके बंडल का साइज़ बढ़ सकता है.
आख़िर में, आपको सिर्फ़ उन ब्राउज़र को टारगेट करने के लिए क्वेरी का सही कॉम्बिनेशन चुनना चाहिए जो आपकी ज़रूरत के हिसाब से सही हों.
आधुनिक गड़बड़ी ठीक करने की सुविधा चालू करें
@babel/preset-env, कई JavaScript सिंटैक्स सुविधाओं को कलेक्शन में इकट्ठा करता है और तय किए गए टारगेट ब्राउज़र के आधार पर उन्हें चालू/बंद करता है. हालांकि यह अच्छी तरह से काम करता है, लेकिन जब टारगेट किए गए किसी ब्राउज़र में सिर्फ़ एक सुविधा वाला बग होता है, तो सिंटैक्स सुविधाओं का पूरा संग्रह बदल दिया जाता है.
इस वजह से, कोड में ज़रूरत से ज़्यादा बदलाव होते हैं.
मूल रूप से इसे अलग प्रीसेट के तौर पर डेवलप किया गया है. @babel/preset-env में मौजूद गड़बड़ी समाधान विकल्प, इस समस्या को हल करता है. इसके लिए, कुछ ब्राउज़र में ऐसे मॉडर्न सिंटैक्स का इस्तेमाल करना होता है जो उन ब्राउज़र में काम नहीं करता. इसका नतीजा करीब-करीब एक जैसा आधुनिक कोड है. इसमें छोटे-छोटे सिंटैक्स में बदलाव किए गए हैं, जो सभी टारगेट ब्राउज़र में काम करने की गारंटी देते हैं. इस ऑप्टिमाइज़ेशन का इस्तेमाल
करने के लिए, पक्का करें कि आपके डिवाइस पर @babel/preset-env 7.10 या इसके बाद का वर्शन इंस्टॉल हो. इसके बाद, bugfixes प्रॉपर्टी को true पर सेट करें:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
बेबल 8 में, bugfixes विकल्प डिफ़ॉल्ट रूप से चालू रहेगा.
<script type="module"> का इस्तेमाल करें
JavaScript मॉड्यूल या ES मॉड्यूल एक ऐसी नई सुविधा है जो सभी बड़े ब्राउज़र में काम करती है. मॉड्यूल का इस्तेमाल करके, ऐसी स्क्रिप्ट बनाई जा सकती हैं जिन्हें दूसरे मॉड्यूल से इंपोर्ट और एक्सपोर्ट किया जा सकता है. हालांकि, @babel/preset-env के साथ भी इनका इस्तेमाल करके, सिर्फ़ उन ब्राउज़र को टारगेट किया जा सकता है जिन पर यह काम करता है.
ब्राउज़र के खास वर्शन या बाज़ार में हिस्सेदारी के बारे में क्वेरी करने के बजाय, अपनी .babelrc फ़ाइल के targets फ़ील्ड में "esmodules" : true बताएं.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
बेबल के साथ कंपाइल की गई कई नई ECMAScript सुविधाएं, पहले से ही उन एनवायरमेंट में काम करती हैं जो JavaScript मॉड्यूल के साथ काम करते हैं. इससे, यह पक्का करने की प्रोसेस आसान हो जाती है कि सिर्फ़ उन ब्राउज़र के लिए ट्रांसपाइल किया गया कोड इस्तेमाल किया जाए जिन्हें इसकी ज़रूरत है.
मॉड्यूल के साथ काम करने वाले ब्राउज़र, nomodule एट्रिब्यूट वाली स्क्रिप्ट को अनदेखा कर देते हैं.
इसके ठीक उलट, जिन ब्राउज़र में मॉड्यूल काम नहीं करते उनमें type="module" वाले स्क्रिप्ट एलिमेंट को अनदेखा कर दिया जाता है. इसका मतलब है कि इसमें मॉड्यूल के साथ-साथ, कंपाइल किया गया फ़ॉलबैक भी शामिल किया जा सकता है.
आम तौर पर, किसी ऐप्लिकेशन की दो वर्शन स्क्रिप्ट इस तरह से शामिल की जाती हैं:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
ऐसे ब्राउज़र जो मॉड्यूल को फ़ेच करने की सुविधा देते हैं और main.mjs को एक्ज़ीक्यूट करते हैं. साथ ही, compiled.js को अनदेखा करते हैं.
जिन ब्राउज़र में मॉड्यूल काम नहीं करते उनका उलटा होता है.
अगर वेबपैक का इस्तेमाल किया जाता है, तो अपने ऐप्लिकेशन के दो अलग-अलग वर्शन के लिए, कॉन्फ़िगरेशन में अलग-अलग टारगेट सेट किए जा सकते हैं:
- यह वर्शन सिर्फ़ उन ब्राउज़र पर लागू होता है जिनमें मॉड्यूल का इस्तेमाल किया जा सकता है.
- वह वर्शन जिसमें कंपाइल की गई स्क्रिप्ट शामिल है, जो किसी भी लेगसी ब्राउज़र में काम करती है. इसका फ़ाइल साइज़ बड़ा है, क्योंकि ट्रांसपिलेशन को ब्राउज़र की ज़्यादा रेंज पर काम करने की ज़रूरत होती है.
इसकी समीक्षाओं के लिए कॉनर क्लार्क और जेसन मिलर का शुक्रिया.