जावास्क्रिप्ट .map फाइलें - जावास्क्रिप्ट स्रोत मानचित्र

Question

हाल ही में मैंने .js.mapकुछ जावास्क्रिप्ट पुस्तकालयों (जैसे कोणीय ) के साथ भेज दी गई एक्सटेंशन वाली फाइलों को देखा है , और बस मेरे सिर में कुछ सवाल उठाए हैं:

• ये किसके लिये है? .js.mapफाइल डिलीवर करने के लिए कोणीय देखभाल के लोग क्यों करते हैं ?
• मैं (एक जावास्क्रिप्ट डेवलपर के रूप में) angular.min.js.mapफ़ाइल का उपयोग कैसे कर सकता हूं ?
• क्या मुझे .js.mapअपने जावास्क्रिप्ट अनुप्रयोगों के लिए फाइलें बनाने की परवाह करनी चाहिए ?
• यह कैसे बनता है? मैंने देख लिया angular.min.js.mapऔर यह अजीब-स्वरूपित तारों से भर गया था इसलिए मुझे लगता है कि यह मैन्युअल रूप से नहीं बनाया गया है।

Comments

html5rocks.com/en/tutorials/developertools/sourcemaps

— आनंद

Answer 1

.mapफ़ाइलों के लिए कर रहे हैं jsऔर css(और अब tsभी) फ़ाइलों को न्यूनतम किया जा सकता है। उन्हें SourceMaps कहा जाता है। जब आप एक फाइल को छोटा करते हैं, तो angular.js फ़ाइल की तरह, यह हजारों कोडों को सुंदर कोड में ले जाती है और इसे केवल बदसूरत कोड की कुछ लाइनों में बदल देती है। उम्मीद है, जब आप उत्पादन के लिए अपने कोड को शिपिंग कर रहे हैं, तो आप पूर्ण, अकुशल संस्करण के बजाय minified कोड का उपयोग कर रहे हैं। जब आपका ऐप उत्पादन में है, और एक त्रुटि है, तो सोर्समैप आपकी बदसूरत फ़ाइल को लेने में मदद करेगा, और आपको कोड का मूल संस्करण देखने की अनुमति देगा। यदि आपके पास सोर्समैप नहीं है, तो किसी भी त्रुटि को सबसे अच्छा लगता है।

CSS फाइलों के लिए भी। एक बार जब आप SASS या LESS फ़ाइल लेते हैं और इसे CSS में संकलित करते हैं, तो ऐसा कुछ नहीं दिखता है कि यह मूल रूप है। यदि आप sourcemaps सक्षम करते हैं, तो आप संशोधित स्थिति के बजाय फ़ाइल की मूल स्थिति देख सकते हैं।

तो, आप क्रम में सवालों के जवाब देने के लिए:

• ये किसके लिये है? बदसूरत कोड का संदर्भ देने के लिए
• एक डेवलपर इसका उपयोग कैसे कर सकता है? आप इसका उपयोग किसी प्रोडक्शन ऐप को डीबग करने के लिए करते हैं। विकास मोड में आप कोणीय के पूर्ण संस्करण का उपयोग कर सकते हैं। उत्पादन में, आप छोटा संस्करण का उपयोग करेंगे।
• क्या मुझे js.map फ़ाइल बनाने की परवाह करनी चाहिए? यदि आप उत्पादन कोड को डिबग करने में आसान होने की परवाह करते हैं, तो हाँ, आपको इसे करना चाहिए।
• यह कैसे बनता है? इसे बिल्ड टाइम पर बनाया जाता है। ऐसे निर्माण उपकरण हैं जो आपके लिए .map फ़ाइल का निर्माण कर सकते हैं क्योंकि यह अन्य फ़ाइलों को करता है। https://github.com/gruntjs/grunt-contrib-uglify/issues/71

मुझे लगता है कि इसका मतलब बनता है।

Comments

ध्यान दें कि जब तक आप इसे कॉल नहीं करते हैं, तब तक मैप फ़ाइल नहीं भेजी जाएगी, यही कारण है कि मैंने मुझे भ्रमित किया है stackoverflow.com/a/27196201/861487

— अब्देलौहाब

धन्यवाद aaron, यह उन बेहतर विवरणों में से एक है, जिन्हें मैंने सोर्समैप के लिए देखा है। मैं इसे gulp में उपयोग कर रहा हूं और मैंने gulp के बारे में सब कुछ जान लिया था और वास्तव में सोच रहा था कि कैसे sourcemaps का उपयोग किया जा रहा है, अब मैं इसका उपयोग करके आत्मविश्वास महसूस कर सकता हूं। अधिकांश gulp प्लगइन्स अभी एक साल पहले बनाम जब कुछ नहीं थे तब भी संगत हैं। बस यह कहना चाहता था कि यह कुल समझ में आता है!

— एरिक बिशर्ड

@frosty de-reference uglified कोड । क्या आप इसे समझा सकते हैं? क्या कोई .js.mapफाइल हैंड-क्राफ्टेड फाइल और एक मिनिफायड फाइल के बीच एक संबंध ( संदर्भ नामक संदर्भ ) नहीं रखता है ?

— मोहम्मद ज़मीर

@student यह डे-रेफरेंस कहता है, क्योंकि मैं मिनिफाईड कोड का संदर्भ नहीं देना चाहता। यह छोटा है और अगर मैं इसे देखता हूं, तो यह बेकार है। लेकिन, अगर यह इसे मूल स्रोत पर वापस भेज सकता है, तो यह महाकाव्य होगा। और यह वास्तव में एक स्रोत है। मुझे आशा है कि वह मदद करेंगे।

— ठंढी

मुझे यह जवाब पसंद है (धन्यवाद), लेकिन इसमें 420 लाइक्स हैं ... क्या मैं इसे तोड़ दूं?

— एरिक रीड ने

Answer 2

बस सवाल के आखिरी हिस्से पर ध्यान केंद्रित करना चाहता था; स्रोत मानचित्र फ़ाइलें कैसे बनाई जाती हैं? निर्माण उपकरण सूचीबद्ध करके मुझे पता है कि स्रोत मानचित्र बना सकते हैं।

1. ग्रन्ट : प्लगइन का उपयोग करनाgrunt-contrib-uglify
2. गुलप : प्लगइन का उपयोग करनाgulp-uglify
3. Google बंद करना : पैरामीटर का उपयोग करना--create_source_map

Answer 3

• एक डेवलपर इसका उपयोग कैसे कर सकता है?

मुझे टिप्पणियों में इसका उत्तर नहीं मिला, यहां बताया गया है कि इसका उपयोग कैसे किया जा सकता है:

1. अपनी js.map फ़ाइल को अपनी index.html फ़ाइल में लिंक न करें (इसके लिए कोई ज़रूरत नहीं)

2. लघुकरण उपकरण (अच्छे वाले) आपकी .min.js फ़ाइल में एक टिप्पणी जोड़ते हैं:

   // # sourceMappingURL = yourFileName.min.js.map

जो आपकी .map फ़ाइल को कनेक्ट करेगा ।

जब min.js और js.map फाइलें तैयार होती हैं ...

3. Chrome: देव-उपकरण खोलें , स्रोत टैब पर जाएँ, आपको स्रोत फ़ोल्डर दिखाई देंगे , जहाँ अन-मिनिफ़ाइ किए गए अनुप्रयोग फ़ाइलें रखी जाती हैं।

Answer 4

मैप फाइल मिनिमाइज्ड फाइल के लिए अनमीनाइज्ड फाइल को मैप करती है। यदि आप अमान्‍य फ़ाइल में परिवर्तन करते हैं, तो परिवर्तन स्वचालित रूप से फ़ाइल के लघु संस्करण में दिखाई देंगे।

Answer 5

बस मानचित्र फ़ाइलों का उपयोग करने के लिए कैसे जोड़ने के लिए। मैं ubuntu के लिए क्रोम का उपयोग करता हूं और अगर मैं स्रोतों में जाता हूं और एक फाइल पर क्लिक करता हूं, अगर कोई नक्शा फ़ाइल है तो एक संदेश आता है जो मुझे बता रहा है कि मैं मूल फ़ाइल देख सकता हूं और यह कैसे करना है।

मेरे द्वारा काम की गई कोणीय फ़ाइलों के लिए मैं आज क्लिक करता हूं

Ctrl-P और मूल फ़ाइलों की एक सूची एक छोटी विंडो में आती है।

फिर मैं उस फ़ाइल को देखने के लिए सूची के माध्यम से ब्राउज़ कर सकता हूं जिसे मैं निरीक्षण करना और जांचना चाहूंगा कि समस्या कहां हो सकती है।