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