JavaScript फ़ॉर्मेटर व मिनिफ़ायर

JavaScript फ़ॉर्मेटर क्या है?#

एक JavaScript फ़ॉर्मेटर ऐसे कोड को लेता है जो पढ़ना कठिन है — किसी बंडलर का मिनिफाइड आउटपुट, किसी चैट से कॉपी किया गया सिकुड़ा हुआ स्निपेट, या बस कोई फ़ाइल जिसे पाँच लोगों ने पाँच अलग इंडेंटेशन आदतों से संपादित किया है — और उसे दोबारा इस तरह लिखता है कि संरचना दिखे। इंडेंटेशन नेस्टिंग से मेल खाती है, ऑपरेटर्स को समान स्पेसिंग मिलती है, और कथन वहीं समाप्त होते हैं जहाँ आप अपेक्षा करते हैं। एक अच्छा फ़ॉर्मेटर उल्टा भी करता है: जब आपको सबसे छोटा संभव पेलोड चाहिए तब हर ग़ैर-ज़रूरी चीज़ निकाल देता है।

यह पेज दोनों काम करता है, और हर एक कैसे काम करता है इसके बारे में ईमानदार है। फ़ॉर्मेट Prettier के स्टैंडअलोन बिल्ड द्वारा Babel पार्सर के साथ चालित है — वही इंजन जो कई टीमें अपने एडिटर में सेव पर चलाती हैं, इसलिए यहाँ का आउटपुट वही है जो आपकी परियोजना बनाएगी। संक्षिप्त जानबूझकर रूढ़िवादी है: यह कमेंट्स हटाता है और व्हाइटस्पेस सिकोड़ता है जबकि हर न्यूलाइन रखता है, इसलिए स्वतः सेमीकोलन इंसर्शन (ASI) कभी नहीं टूटता। यह esbuild या terser जैसा कोई टोकन-स्तरीय मिनिफायर नहीं है — यह वैरिएबल्स का नाम नहीं बदलता, डेड कोड नहीं गिराता, या प्रॉपर्टी नाम नहीं बिगाड़ता। इससे परिणाम सीधे एक JS इंजन को वापस खिलाना सुरक्षित होता है, पर यह प्रोडक्शन बंडल सिकोड़ने के लिए ग़लत औज़ार है। अंतर जानना ही इसका अच्छा उपयोग करने का पूरा मतलब है।

इसका उपयोग कैसे करें#

1. अपना JavaScript बाईं ओर JavaScript पैनल में चिपकाएँ, या एक छोटा उदाहरण लोड करने के लिए नमूना पर क्लिक करें।
2. टूलबार पर कोई इंडेंट शैली चुनें: 2, 4, या टैब। दो स्पेस आधुनिक परियोजनाओं में लगभग सार्वभौमिक डिफ़ॉल्ट हैं; टैब केवल तभी चुनें जब आप किसी ऐसे एडिटर में चिपकाने वाले हों जो टैब के लिए कॉन्फ़िगर किया गया हो।
3. कोई क्रिया चुनें:
   • फ़ॉर्मेट — कोड को चुनी हुई इंडेंट के साथ Prettier से दोबारा प्रिंट करता है। सेमीकोलन डिफ़ॉल्ट रूप से निकाले जाते हैं, Prettier के मानक व्यवहार से मेल खाते हुए।
   • संक्षिप्त — // लाइन कमेंट्स और /* */ ब्लॉक कमेंट्स हटाता है, स्पेस और टैब के समूह सिकोड़ता है, और हर पंक्ति पर अनुगामी व्हाइटस्पेस गिराता है। न्यूलाइन्स जानबूझकर रखे जाते हैं।
4. परिणाम दाईं ओर आउटपुट पैनल में पढ़ें। उसे लेने के लिए आउटपुट हेडर में कॉपी का उपयोग करें। साफ़ करें दोनों पैनलों को खाली करता है।

यदि फ़ॉर्मेट आपका इनपुट पार्स नहीं कर पाता (एक फुटकर ब्रैकेट, एक असमाप्त टेम्प्लेट लिटरल), तो स्थिति पट्टी भ्रष्ट आउटपुट पैदा करने के बजाय Prettier का त्रुटि संदेश दिखाती है — ताकि आप वास्तवीय समस्या ठीक करें बजाय किसी भ्रामक पुनर्संरचना का पीछा करने के।

प्रमुख विशेषताएँ#

• असली Prettier इंजन। फ़ॉर्मेट स्टैंडअलोन Prettier बिल्ड को Babel + estree प्लगइन्स के साथ चलाता है, कोई हाथ से बनाया ब्यूटीफ़ायर नहीं। आपको यहाँ वही मिलता है जो prettier --write बनाता है।
• ASI-सुरक्षित संक्षिप्त। मिनिफ़िकेशन के दौरान न्यूलाइन्स सुरक्षित रखे जाते हैं, इसलिए वह पंक्ति जो स्वतः सेमीकोलन इंसर्शन पर निर्भर थी काम करती रहती है। न्यूलाइन्स को अंधाधुंध हटाना ठीक वही है जिससे सामान्य “मिनिफायर” बग पैदा करते हैं।
• स्ट्रिंग, रेजेक्स और टेम्प्लेट जागरूक। कमेंट स्ट्रिपर को पता है कि स्ट्रिंग के अंदर // और एक असली लाइन कमेंट के बीच, और डिवीज़न के रूप में / और एक रेजेक्स लिटरल की शुरुआत के रूप में / के बीच अंतर है — इसलिए यह कभी आपके कोड में नहीं चबता।
• दो-पैनल, कॉपी-तैयार। इनपुट और आउटपुट साथ-साथ बैठे; आउटपुट केवल-पढ़ने योग्य है एक-क्लिक कॉपी के साथ।
• पूरी तरह आपके ब्राउज़र में चलता है। न कोई बैकएंड और न कोई अपलोड। Prettier पेज में बंडल है और माँग पर लोड होता है, इसलिए स्क्रिप्ट अभी भी एक सख्त self-केवल कंटेंट सिक्योरिटी नीति को संतुष्ट करता है।

कार्य उदाहरण#

एक पुराने गिस्ट से कॉपी किया गया फलन, कमेंट्स और असंगत इंडेंटेशन सहित:

इनपुट:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

2 स्पेस के साथ फ़ॉर्मेट पर क्लिक करें:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier टेढ़ी इंडेंट ठीक करता है, ऑपरेटर्स को समान रूप से स्पेस देता है, और सेमीकोलन जोड़ता है — पर ब्लॉक कमेंट को बिलकुल वहीं छोड़ देता है। अब मूल इनपुट पर इसके बजाय संक्षिप्त पर क्लिक करें:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

कमेंट चला गया, फुटकर इंडेंट चली गई, पर हर कथन अभी भी अपनी पंक्ति पर है। ध्यान दें कि क्या नहीं हुआ: fetchUser छोटा नहीं हुआ, "GET" बदला नहीं, एरो फलन ने अपनी पैरामीटर सूची रखी। यह पठनीय संपीड़न है, स्क्रिप्ट टैग में वापस चिपकाने के लिए सुरक्षित — न कि वह आक्रामक विरूपण जो कोई बंडलर बिल्ड समय पर करता।

अक्सर पूछे जाने वाले प्रश्न#

संक्षिप्त वैरिएबल्स का नाम क्यों नहीं बदलता या मेरे बंडल को सिकोड़ता नहीं?#

क्योंकि वह सही ढंग से करने के लिए एक पूर्ण पार्सर-एंड-कोडजेन पास की ज़रूरत है (स्कोप विश्लेषण, प्रॉपर्टी ट्रैकिंग, साइड-इफ़ेक्ट पहचान)। इस औज़ार का संक्षिप्त जानबूझकर एक स्कैनर है: यह तेज़ है, डिपेंडेंसी-हल्का, और सिद्ध रूप से रनटाइम व्यवहार नहीं बदल सकता। प्रोडक्शन बंडल के लिए, ऑफ़लाइन कोई असली बंडलर चलाएँ; इस पेज का उपयोग त्वरित सफ़ाई, किसी डॉक में चिपकाने, या किसी ऐसे स्निपेट को तैयार करने के लिए करें जिसे कोई और पढ़ेगा।

क्या मिनिफायर स्ट्रिंग्स के अंदर के कमेंट्स हटाता है?#

नहीं। स्कैनर सोर्स को कैरेक्टर-दर-कैरेक्टर चलता है और ट्रैक करता है कि वह वर्तमान में किसी सिंगल-कोट स्ट्रिंग, डबल-कोट स्ट्रिंग, टेम्प्लेट लिटरल, या रेजेक्स लिटरल के अंदर है या नहीं। इनमें से किसी के भी अंदर दिखने वाला // टेक्स्ट माना जाता है और वैसे ही छोड़ दिया जाता है; केवल असली कमेंट्स हटाए जाते हैं।

क्या यह TypeScript या JSX संभालता है?#

फ़ॉर्मेट पाथ Babel पार्सर उपयोग करता है, जो JSX स्वीकार करता है। TypeScript टाइप एनोटेशन और .ts/.tsx-विशिष्ट सिंटैक्स यहाँ सक्षम नहीं हैं — यदि आपको उनकी ज़रूरत है तो यह औज़ार चुपचाप गलत आउटपुट पैदा करने के बजाय एक पार्स त्रुटि रिपोर्ट करेगा। इस पेज को सादे JavaScript के लिए रखें।

क्या मेरा कोड कहीं अपलोड होता है?#

नहीं। सब कुछ उसी टैब में चलता है जिसे आप देख रहे हैं। Prettier पेज के साथ बंडल है और माँग पर इंपोर्ट होता है; आपका सोर्स टेक्स्ट मेमोरी में पार्स होता है और कभी नेटवर्क पर नहीं भेजा जाता।