JavaScript ऑनलाइन अनमिनिफ़ाई करें
मिनिफ़ाई की गई .js फ़ाइल, webpack बंडल या एक पंक्ति का कोड पेस्ट करें। दाएँ पैनल में सही इंडेंटेशन वाला JavaScript पाएँ। फ़ॉर्मैटिंग Prettier से आपके ब्राउज़र में होती है, कुछ भी कहीं अपलोड नहीं होता।
JavaScript पढ़ना मुश्किल क्यों हो जाता है?
हर आधुनिक बिल्ड पाइपलाइन JavaScript को भेजने से पहले मिनिफ़ाई करती है। Terser, esbuild, SWC और ऐसे दूसरे टूल स्पेस व टिप्पणियाँ हटाते हैं। फिर स्थानीय वेरिएबल और फ़ंक्शन के नाम एक अक्षर में बदलते हैं, नेस्टेड ब्लॉक को जुड़ी हुई एक्सप्रेशन में समेटते हैं और पूरी ऐप्लिकेशन को एक या दो फ़ाइलों में मिला देते हैं। तीन सौ पठनीय स्रोत फ़ाइलों से शुरू हुई React ऐप ब्राउज़र तक कुछ सौ किलोबाइट की एक पंक्ति बनकर पहुँचती है। कोड ठीक चलता है, लेकिन उसे पढ़ने की ज़रूरत पड़ते ही सामने ऐसा घना पाठ होता है जिसमें संरचना पकड़ना कठिन है।
फ़ॉर्मैटिंग से वास्तव में क्या वापस मिलता है?
बंडल को फ़ॉर्मैट करने पर वे चीज़ें लौटती हैं जिनसे कोड में रास्ता खोजना आसान होता है। स्टेटमेंट फिर अलग-अलग पंक्तियों में आते हैं। पंक्ति 1, कॉलम 24815 का स्टैक ट्रेस संदर्भ खोजने के लिए अब व्यवस्थित कोड उपलब्ध होता है। नेस्टिंग दिखने लगती है: फ़ंक्शन कहाँ शुरू और समाप्त होता है, शर्त किस शाखा को नियंत्रित करती है और कॉलबैक की शृंखला कैसे जुड़ी है। स्ट्रिंग, URL और एंडपॉइंट के नाम आसानी से देखे जा सकते हैं। अपने कोड की डीबगिंग के बजाय किसी स्क्रिप्ट का ऑडिट करते समय अक्सर यही जानकारी चाहिए होती है।
आधुनिक सिंटैक्स भी समर्थित है
फ़ॉर्मैटर आज के JavaScript को पार्स करता है, किसी पुराने सीमित रूप को नहीं। ऐरो फ़ंक्शन, क्लास, async और await, जनरेटर, ऑप्शनल चेनिंग, नलिश कोअलेसिंग, टेम्पलेट लिटरल, डिस्ट्रक्चरिंग, स्प्रेड सिंटैक्स, डायनैमिक इंपोर्ट और ES मॉड्यूल सही तरह फ़ॉर्मैट होते हैं। JSX भी समर्थित है, जो ऐसे React कंपोनेंट को पढ़ते समय उपयोगी है जिसका JSX बिल्ड में दूसरे रूप में नहीं बदला गया। काम Prettier करता है, इसलिए आउटपुट उन्हीं परंपराओं का पालन करता है जो आपका एडिटर आपकी अपनी फ़ाइलों पर लागू करता है।
इसकी सीमाएँ क्या हैं?
अनमिनिफ़ाई करना रिवर्स इंजीनियरिंग नहीं है। मिनिफ़ायर ने टिप्पणियाँ मिटा दीं और वेरिएबल के नाम बदल दिए। कोई फ़ॉर्मैटर नहीं जान सकता कि अब n कहलाने वाला वेरिएबल पहले remainingRetries था। यदि प्रोजेक्ट ने सोर्स मैप प्रकाशित किया है, तो उसे ब्राउज़र DevTools में लोड करें। असली मूल स्रोत तक वापस पहुँचने का वही रास्ता है। और यदि फ़ाइल केवल मिनिफ़ाई नहीं, बल्कि जानबूझकर ऑब्फ़स्केट की गई है, तो संरचना पढ़ने लायक होगी, मगर कोड का उद्देश्य फिर भी अस्पष्ट रह सकता है।
अक्सर पूछे जाने वाले सवाल
क्या इससे webpack या Vite बंडल अनमिनिफ़ाई हो सकता है?
हाँ। बंडल पेस्ट करें या फ़ाइल चुनें से फ़ाइल खोलें। उसे किसी भी अन्य JavaScript फ़ाइल की तरह फ़ॉर्मैट किया जाएगा। बड़े बंडल में कुछ सेकंड लग सकते हैं, क्योंकि काम आपके अपने कंप्यूटर पर होता है। इंडेंटेशन के बाद मॉड्यूल की संरचना साफ़ दिखने लगती है।
क्या यह JavaScript का डीऑब्फ़स्केशन करता है?
यह ऑब्फ़स्केट किए कोड को फ़ॉर्मैट करता है, जिससे उसे पढ़ना काफ़ी आसान होता है। लेकिन ऑब्फ़स्केशन स्वयं नहीं हटाता। एन्कोड की गई स्ट्रिंग, कृत्रिम कंट्रोल फ़्लो और जानबूझकर जोड़ा गया निष्क्रिय कोड वहीं बने रहते हैं।
क्या इससे मेरा कोड ख़राब हो सकता है?
फ़ॉर्मैटर एकसमान शैली लागू करते हुए JavaScript का व्यवहार बनाए रखने का प्रयास करता है। वह विराम चिह्न, उद्धरण चिह्न और लेआउट बदल सकता है, इसलिए आउटपुट मूल की बाइट-दर-बाइट कॉपी नहीं है। मूल फ़ाइल रखें, नतीजा जाँचें और बदले या फ़ॉर्मैट किए बंडल को प्रोडक्शन में लगाने से पहले प्रोजेक्ट के टेस्ट चलाएँ।