सभी मुख्य ब्राउज़र पर अच्छी तरह से काम करने वाली वेबसाइटें बनाना, ओपन वेब नेटवर्क का मुख्य सिद्धांत है. हालांकि, इसका मतलब यह है कि आपको यह पक्का करना होगा कि आपका लिखा गया सारा कोड, टारगेट किए जा रहे हर ब्राउज़र पर काम करता हो. अगर आपको JavaScript भाषा की नई सुविधाओं का इस्तेमाल करना है, तो आपको इन सुविधाओं को ऐसे फ़ॉर्मैट में ट्रांसपाइल करना होगा जो पुराने सिस्टम के साथ काम करते हों. ऐसा उन ब्राउज़र के लिए करना होगा जिन पर ये सुविधाएं अभी काम नहीं करती हैं.
Babel, कोड को कॉम्पाइल करने के लिए सबसे ज़्यादा इस्तेमाल किया जाने वाला टूल है. इसमें कोड में नया सिंटैक्स होता है, जिसे अलग-अलग ब्राउज़र और एनवायरमेंट (जैसे, Node) समझ सकते हैं. इस गाइड में यह माना गया है कि आपने 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 में बग ठीक करने का विकल्प, मूल रूप से अलग प्रीसेट के तौर पर डेवलप किया गया था. यह विकल्प, कुछ ब्राउज़र में काम न करने वाले सिंटैक्स को, उन ब्राउज़र में काम करने वाले मिलते-जुलते सिंटैक्स में बदलकर इस समस्या को हल करता है. नतीजा, सिंटैक्स में कुछ छोटे बदलावों के साथ, करीब-करीब एक जैसा मॉडर्न कोड होता है. इससे यह पक्का होता है कि यह सभी टारगेट ब्राउज़र पर काम करेगा. इस ऑप्टिमाइज़ेशन का इस्तेमाल करने के लिए, पक्का करें कि आपने @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 को अनदेखा करते हैं.
मॉड्यूल के साथ काम न करने वाले ब्राउज़र, इसके उलट काम करते हैं.
अगर वेबपैक का इस्तेमाल किया जाता है, तो अपने ऐप्लिकेशन के दो अलग-अलग वर्शन के लिए, कॉन्फ़िगरेशन में अलग-अलग टारगेट सेट किए जा सकते हैं:
- यह वर्शन सिर्फ़ उन ब्राउज़र के लिए है जिनमें मॉड्यूल काम करते हैं.
- यह एक ऐसा वर्शन है जिसमें एक कंपाइल की गई स्क्रिप्ट शामिल होती है, जो किसी भी लेगसी ब्राउज़र में काम करती है. इस फ़ाइल का साइज़ बड़ा होता है, क्योंकि ट्रांसपाइलेशन के लिए ज़्यादा ब्राउज़र के साथ काम करना ज़रूरी होता है.
समीक्षा करने के लिए, कॉनर क्लार्क और जेसन मिलर का धन्यवाद.