2014-12-27 14 views
42

आज मैंने सीखा कि include source maps को अपनी अलग जावास्क्रिप्ट फ़ाइल में सीधे एक अलग example.min.map फ़ाइल में रखने के बजाय यह संभव है। मुझे आश्चर्य है: कोई भी ऐसा क्यों करना चाहेगा?इनलाइन स्रोत मानचित्र क्यों?

स्रोत मानचित्र रखने का लाभ मुझे स्पष्ट है: उदाहरण के लिए, मिनी फाइलों को चलाने के दौरान मूल, गैर संपीड़ित स्रोत फ़ाइलों के साथ त्रुटियों को डीबग कर सकते हैं। न्यूनतमकरण का लाभ भी स्पष्ट है: स्रोत फ़ाइलों का आकार बहुत कम हो गया है, जिससे ब्राउज़र डाउनलोड करने में तेज़ी हो जाती है।

तो क्यों पृथ्वी पर मैं स्रोत मानचित्र को मिनीफाइड फ़ाइल में शामिल करना चाहता हूं, मानचित्रों के आकार को आकार के आकार से भी बड़ा है?

+0

हाँ, यह पूरी तरह से व्यर्थ लगता है! – Ryan

+0

हो सकता है कि .map एक्सटेंशन अज्ञात है और मशीनों के व्यवस्थापकों के लिए त्रुटियों या समस्याओं को हल करता है जो .exe और .dll फ़ाइलों को निष्पादित करते हैं? – umeboshi

+0

मैंने आज भी यह सीखा है .... एक घंटे खर्च करने के बाद यह पता लगाने की कोशिश कर रहा था कि क्यों नहीं थे और फिर यह पता चला कि वे पहले से ही .js फ़ाइल में एम्बेड किए गए हैं ... –

उत्तर

27

मैंने चारों ओर खोज की और एकमात्र कारण मैं देख सकता था कि लोग इनलाइन स्रोत मानचित्र विकास में उपयोग के लिए हैं। इनलाइन स्रोत मानचित्रों का उत्पादन में उपयोग नहीं किया जाना चाहिए।

आपकी मिनी फाइलों के साथ स्रोत मानचित्रों को रेखांकित करने के लिए तर्कसंगत यह है कि ब्राउज़र विकास और उत्पादन में सटीक एक ही जावास्क्रिप्ट को पार्स कर रहा है। Closure Compiler जैसे कुछ मिनीफायर कोड को छोटा करने के बजाय 'बस' से अधिक करते हैं। advanced options का उपयोग करके यह चीजें भी कर सकता है जैसे: मृत कोड हटाने, फ़ंक्शन इनलाइनिंग, या आक्रामक परिवर्तनीय नामकरण। यह स्रोत फ़ाइल से संभावित रूप से अलग कोड (संभावित रूप से) अलग करता है।

यह अभी भी बाहरी स्रोत मानचित्र फ़ाइलों को संदर्भित करके किया जा सकता है, लेकिन कुछ लोग अपनी निर्माण प्रक्रिया के लिए इनलाइन करना पसंद करते हैं।

9

जेएस बंडलिंग टूल्स जैसे Browserify या Webpack विकासशील मोड में भी आपके सभी .js फ़ाइलों को इनपुट एक या कई बंडल बंडल करेगा। तो इस मामले में, जेनरेट किए गए बंडलों में इनलाइन स्रोत मानचित्र जोड़ना अतिरिक्त फ़ाइलों को लाए बिना डीबगिंग में मदद करने का सबसे आसान तरीका है।

+0

अद्भुत। मैं कोशिश करूँगा। आपने शायद मेरा प्रश्न भी हल कर लिया हो। http://stackoverflow.com/questions/40199998/how-to-generate-custom-source-map-with-custom-webpack-loader –

2

कुछ स्थितियों में आप मूल्यांकन कोड में इनलाइन स्रोतमैप शामिल करना चाहेंगे। उदा। आपके पास एक कॉफ़ीस्क्रिप्ट इनपुट फ़ील्ड है और आप कोड को कॉपी करने में सक्षम करना चाहते हैं।

Getting source maps working with evaluated code

आप @sourceURL शामिल हो सकते हैं अपनी टिप्पणियों में अपना eval कोड का एक URL निर्दिष्ट और एक मानचित्र फ़ाइल को लोड करने (SourceMap Spec 3 का पेज 8 देखें): का मूल्यांकन किया कोड में स्रोत नक्शे के बारे में stackoverflow सवाल ही नहीं है। लेकिन कुछ स्थानों पर फ़ाइलों को लिखना हमेशा संभव नहीं होता है।

0

cheap-module-source-map उत्पादन निर्माण के लिए बहुत बेहतर है।

inline-source-map, क्रोम डिबगर बस इसे डिवाइस पर चाहता है किसी भी फ़ाइल तक नहीं पहुँच सकते हैं आप एक Android डिवाइस पर दूरस्थ डीबगिंग क्रोम कर रहे हैं जब

13

परीक्षण त्वरित और गंदी बनाता है बनाने के लिए प्रयोग किया जाता है और कहा कि अलग नक्शा फ़ाइलें भी शामिल है। यदि आप उन्हें इनलाइन शामिल करते हैं तो आपके पास यह समस्या नहीं है।

+0

सच है, लेकिन आपकी फ़ाइलों को आकार के दोगुने होने के बाद प्रदर्शन के बारे में क्या बात है? – Remi

+0

आप स्पष्ट रूप से केवल – Tim

+0

विकास में ऐसा करेंगे, मैं असहमत हूं। यदि आपके पास डीटीएपी सेटअप है तो आपके पास टेस्ट एंड स्वीकृति पर एक स्रोतमैप के साथ मिनीफाइड संस्करण भी होगा। और उत्पादन पर भी उस पर्यावरण पर डीबगिंग की अनुमति देने के लिए। विकास में, आपको एक न्यूनतम संस्करण persé के साथ काम करने की ज़रूरत नहीं है। पैकेज प्रबंधक स्रोतमैप के लिए एक अलग फ़ाइल की अनुमति देते हैं जिसे आप भेज सकते हैं ताकि आपको इसे प्रदर्शन हिट को रोकने के लिए प्रारंभिक लोड में शामिल न करना पड़े। – Remi

संबंधित मुद्दे