स्रोत को जोड़ने का समय स्रोत मानचित्र का परिचय

आधुनिक विकास में, आपका कोड संकलन, खनन, विलय और विभिन्न अनुकूलन के बाद "लड़ाई" सर्वर (उत्पादन) पर कोड से बहुत अलग है। यह वह जगह है जहां स्रोत के नक्शे काम में आते हैं, समाप्त कार्यशील परियोजना कोड के तत्वों और आपके विकास कोड के बीच सटीक पत्राचार दिखाते हैं। इस परिचयात्मक पाठ में, हम एक सरल प्रोजेक्ट लेंगे और विभिन्न जावास्क्रिप्ट कंपाइलरों का उपयोग करके यह देखेंगे कि कोड मैप ब्राउज़र में कैसे काम करते हैं।

(अनुवाद से।) एक ब्राउज़र (संकलित) में संकलित कोड के साथ काम करने की तकनीक के बारे में एक साल पहले से ही एक विस्तृत लेख ( अनुवाद ) था। अब यह तकनीक आक्रामक रूप से सूर्य के नीचे अपनी जगह जीत रही है। उदाहरण के लिए, तब केवल मानचित्रण संकलन के बारे में बात होती थी, और अब, संस्करण 1.6.1 से, कॉफिसस्क्रिप्ट संकलक को मानचित्र फाइलें बनाने के लिए समर्थन मिला है। Jetbrains Webstorm 6.0 / Phpstorm (मार्च 2013) ने कोड के साथ काम करने के लिए SourceMap समर्थन पेश किया। टाइपस्क्रिप्ट में संस्करण 0.8.1 (नवंबर 2012) के बाद से समर्थन है । हर कोई समझता है कि सामने के छोर पर "असेंबलर" के साथ मैनुअल काम का समय गुजरता है, हर किसी को यह जानना होगा कि कोड से पैर कहाँ बढ़ते हैं। हम मिनिफ़ाई किए गए फ़ाइल कोड डिकोडिंग के प्रारंभिक अनुप्रयोग के बारे में भी बात नहीं कर रहे हैं - UglifyJS, क्लोजर कंपाइलर और GWT (कम से कम) वे समर्थित हैं। यह JS और CSS कोड कंपाइलर के बारे में है।

और हाल ही में (जनवरी 2013 में) यह बड़ा शैक्षिक लेख उदाहरणों के साथ समझाता हुआ दिखाई दिया कि कोड कार्ड तकनीक कैसे काम करती है। हालाँकि पहला लेख भी विस्तृत था, लेकिन अनुवाद में दूसरा होने से आहत नहीं हुआ, यह दूसरे शब्दों और दृष्टांतों में समान है, और अभ्यास करने के लिए आगे बढ़ता है - उदाहरण के लिए।

सामान्य ज्ञान से दहलीज को पार करने के लिए हमेशा एक निश्चित अवरोध का अनुभव होता है। कोड कार्ड फाइलें बनाने के परिणामों को देखने के लिए प्रशिक्षण फ़ाइलों का उपयोग करना, इस बीच हमें अपने स्वयं के प्रोजेक्ट्स को इकट्ठा करने के लिए हमारे कंप्यूटर पर काम करने का माहौल मिलेगा - वे सभी कंपाइलर और मिनिफ़ायर जिनके बारे में हम जानते थे लेकिन उपयोग करने से डरते थे, हमें इकट्ठा करना होगा, और हम केवल लिखेंगे हाल ही में चीनी दृश्य भाषाओं तक विदेशी में से एक में आपका कोड।

कृपया ध्यान दें कि यदि आप ग्रन्ट 0.4+ कलेक्टर के नए संस्करण का उपयोग करते हैं, तो उसे लेख में वर्णित की तुलना में थोड़ी अलग सेटिंग्स की आवश्यकता होगी। संक्रमण के बारे में और अधिक पढ़ें 0.3.9 से 0.4x में habrahabr.ru/post/170937 ।

लेखक ने Mas से स्क्रीनशॉट का उपयोग किया। क्रोम के लिए, वे विंडोज संस्करण से ब्राउज़र सेटिंग्स में बहुत अलग हैं, इसलिए कुछ स्थानों पर विंडोज में क्रोम के रूसी संस्करण से स्क्रीनशॉट जोड़े गए हैं।

क्रॉस-ब्राउज़र विकास के लिए, किसी भी मुख्य प्रणाली में काम करने में सक्षम होना बेहतर है। यदि लिनक्स और मैकओएस के साथ कोई प्रश्न नहीं हैं, तो यह जांचना महत्वपूर्ण है कि विंडोज के तहत सभी उदाहरण सफलतापूर्वक कैसे काम करते हैं। अनुवाद की प्रक्रिया में, उदाहरणों को विंडोज एक्सपी वातावरण में और कार्यक्रमों के आधुनिक (अप्रैल 2013 तक) संस्करणों को अंतिम रूप दिया गया। परिणामस्वरूप, 5 में से 2 उदाहरणों में, सुधार किए गए थे जो अनुवाद लेख में टिप्पणियों और परिवर्धन के रूप में रखे गए थे। (लेख के लेखक को सुधार के बारे में एक संदेश भेजा गया था।) वे उदाहरणों को वास्तविकता के करीब लाने में मदद करेंगे - दोनों नए संस्करणों (विशेष रूप से ग्रन्ट 0.4 ​​और कॉफ़ीस्क्रिप्ट 1.6.1) के समर्थन के मामले में, साथ ही साथ विंडोज के सभी कार्यों के प्रदर्शन में आत्मविश्वास भी।

अगली विशेषता लेखक के गिटब पर संग्रह है। इस तथ्य के कारण कि इसमें 260 वर्णों से अधिक लंबा पथ है, यह पूरी तरह से WinRar में विस्तारित नहीं है (लेकिन यह उन उदाहरणों के लिए प्रारंभ फ़ाइलों के उपयोग में हस्तक्षेप नहीं करता है जिनमें छोटे रास्ते हैं और उनके साथ सभी उदाहरण चलाते हैं)। पूरे संग्रह को देखने और अनझिप करने के लिए (संपूर्ण जिज्ञासा से), जिसमें सभी उदाहरणों के निष्पादन के बाद स्थापित फाइलें हैं, आपको विनर के अलावा 7zip या किसी अन्य अभिलेखागार का उपयोग करने की आवश्यकता है।

टिप्पणियों, टिप्पणियों और परिवर्तनों की काफी संख्या है (इसके बाद उन्हें अलग करने की सुविधा के लिए "उद्धरण" प्रारूप द्वारा प्रतिष्ठित किया जाएगा।) फिर भी, यह एक नया लेख नहीं है, लेकिन एक अनुवाद है, टिप्पणियों के साथ और स्थानीय और सिरिलिक विशेषताओं को ध्यान में रखते हुए। क्योंकि आपको नई तकनीक के लोकप्रियकरण के संबंध में बहुत सारे काम के अच्छे और दुर्लभ संगठन के लिए श्रद्धांजलि देनी होगी।

लेकिन, चूंकि इस विषय पर दोनों लेख - एक साल पहले अनुवादित और माने गए - पुराने हैं (कई कथन वर्तमान क्षण के अनुरूप नहीं हैं), यह प्रश्न, इसलिए बोलने के लिए, सभी मुद्दों को शामिल करता है ताकि लेख मानचित्रण और चालू दोनों पर एक आधुनिक व्यावहारिक मार्गदर्शक बन जाए। आज के लिए टूल और ब्राउज़र की स्थिति।

स्रोत मानचित्र क्या हैं?

कोड कार्ड विकास के दौरान आपके द्वारा लिखे गए कार्य कोड और स्रोत कोड (स्रोत) के बीच पत्राचार दिखाने का एक भाषा-स्वतंत्र तरीका प्रदान करते हैं। जब आप परियोजना के निर्माण के बाद कोड के पूरे तैयार किए गए सरणी को देखते हैं, तो अंतिम कोड के अनुभाग और उसके स्रोत लाइनों के पत्राचार को खोजना बहुत मुश्किल हो जाएगा। कोड कार्ड इन पत्राचारों को संग्रहीत करता है, इसलिए जब हम पूछते हैं, उदाहरण के लिए, त्रुटि का स्थान, यह स्रोत फ़ाइल में सटीक स्थान दिखाएगा! यह डेवलपर्स के लिए बहुत लाभकारी है, क्योंकि कोड पठनीय हो जाता है और यहां तक ​​कि डीबग भी हो जाता है!

इस ट्यूटोरियल में, हम JS + SASS कोड का एक बहुत ही सरल टुकड़ा संकलित करेंगे, और फिर कोड कार्ड का उपयोग करके ब्राउज़र में स्रोत फ़ाइलों को देखेंगे। डेमो फाइलें डाउनलोड करें और आरंभ करें!

चूंकि ग्रंट (0.4) का आधुनिक संस्करण उदाहरणों में काम करेगा, यह अनुशंसा की जाती है कि आप लेखक के उदाहरणों को डाउनलोड न करें, लेकिन अनुवाद किए गए उदाहरणों को अपडेट करें । उनमें स्टार्ट-अप फाइलें और इंस्टॉलेशन और उदाहरण दोनों के परिणाम हैं, ताकि आप अपने कार्यों की शुद्धता और सफलता को सत्यापित कर सकें - ध्यान दें। ।

ब्राउज़रों

कृपया ध्यान दें कि लेखन के समय, Chrome संस्करण 23 JS और SASS SourceMaps का समर्थन करता है। निकट भविष्य में फ़ायरफ़ॉक्स को भी समर्थन मिलेगा, क्योंकि यह विषय अपने विकास के सक्रिय चरण में है। इन कैविटीज़ के साथ, आइए देखें कि किसी ब्राउज़र में कोड कार्ड का उपयोग कैसे करें।

(लगभग। अनुवाद। :) इस लेख में, अंत में फ़ायरफ़ॉक्स + फायरबग में एसएएस के लिए सोर्सपाइप समर्थन का एक उदाहरण है। फ़ायरफ़ॉक्स के बारे में भी नया: फ़ायरफ़ॉक्स DevTools का भविष्य (मार्च 17, 2013) या अनुवादित :
“CoffeeScript समर्थन करता है। इसे लागू करने के लिए, हमने SourceMap का समर्थन किया। निक फिट्जगेराल्ड डिबगर वर्जन सपोर्टिंग सोर्सपाइप और कॉफीस्क्रिप्ट को प्रदर्शित करता है

निक का काम सीएसएस और जेएस फाइल के मिनिमाइजेशन को सपोर्ट करने में मदद करता है। ”

*) wiki.mozilla.org/DevTools/Features/SourceMap

क्रोम में स्रोत मानचित्र

सबसे पहले, हमें सेटिंग्स में मैपिंग समर्थन को सक्षम करने की आवश्यकता है:
1) क्रोम डेवलपर टूल विंडो खोलें: देखें -> डेवलपर -> डेवलपर टूल (F12);
2) निचले दाएं कोने में "सेटिंग" पर क्लिक करें;
3) "सामान्य" और "स्रोत मानचित्र सक्षम करें" चुनें।

विंडोज के लिए (अनुवाद से) :
1) विन्यास और प्रबंधन (ऊपरी दाएं कोने में) (F12);
2) डेवलपर की विंडो में - निचले दाएं कोने में "सेटिंग";
3) "स्रोत" ब्लॉक में "सामान्य" और "स्रोत मानचित्र सक्षम करें" चुनें।

स्थापना

डेमो संग्रह (अनुवाद के समय सत्यापित अनुवादक उदाहरणों के लिए लिंक) डाउनलोड करें और "प्रारंभ" निर्देशिका खोलें। फ़ाइलें और निर्देशिका संरचना बहुत सरल हैं - स्क्रिप्ट / script.js में सरल जावास्क्रिप्ट का एक सा। Index.html खोलने के बाद, स्क्रिप्ट उपयोगकर्ता द्वारा कलर कोड दर्ज करके पृष्ठ की पृष्ठभूमि का रंग बदल देती है।

/start ├── index.html ├── /scripts │ ├── jquery.d.ts │ ├── script.coffee.coffee │ ├── script.js │ └── script.typescript.ts └── /styles ├── style.css └── style.sass 

जावास्क्रिप्ट, टाइपस्क्रिप्ट और कॉफ़ीस्क्रिप्ट फ़ाइलों में सरल स्क्रिप्ट देखें।
विभिन्न संकलक का उपयोग करके, हम एक असेंबली बनाएंगे और संबंधित कोड कार्ड फ़ाइलों को उत्पन्न करेंगे।

हम संबंधित मानचित्र के साथ संकलित और न्यूनतम स्क्रिप्ट बनाने के लिए 5 विभिन्न तरीकों का उपयोग करेंगे। आप सभी विकल्पों के माध्यम से जा सकते हैं या केवल संकलक का उपयोग कर सकते हैं जो आप जानते हैं।

विकल्प:
1. क्लोजर कंपाइलर ।
2. जेएसएमआईएन के साथ ग्रंटज ।
3. उलगुलिज 2 ।
4. कॉफीस्क्रिप्ट Redux ।
5. टाइपस्क्रिप्ट ।

कार्यक्रमों के वर्तमान संस्करणों के उदाहरणों के परीक्षण और परिशोधन के बाद, उदाहरणों के बेड़े को दो विकल्पों के साथ फिर से तैयार किया गया था।

JSMin के साथ 2.a ग्रंटज (0.4.x) ।
4.a कॉफीस्क्रिप्ट - रेडक्स नहीं, बल्कि मूल संस्करण 1.6.2 ।

पहले में, नए संस्करण की स्थापना के बारे में विस्तार से वर्णन किया गया है, जो फरवरी 2013 तक मौजूदा संस्करण 0.3.x से बहुत अलग है। दूसरे में - मैपिंग का प्रक्षेपण और परीक्षण, जो फरवरी 2013 में कॉफिसस्क्रिप्ट में संस्करण 1.6.1 से दिखाई दिया। (सितंबर 2012 से, यह भूमिका एक क्लोन द्वारा निभाई गई है - कॉफ़ीस्क्रिप्ट रेडक्स।)

(अनुवाद से।) कोड के साथ बहुत पहले परिचित और स्विचिंग विकल्प की प्रस्तावित विधि शर्मनाक है। नहीं, लेखक द्वारा बहुत काम किया गया है और अद्भुत प्रौद्योगिकियां दी गई हैं। लेख अच्छी तरह से डिजाइन किया गया है। लेकिन उपयोगकर्ता इंटरफ़ेस अचानक लंगड़ा है। रिकॉर्डिंग के माध्यम से विकल्पों को स्विच करने और टिप्पणियों को हटाने का तरीका स्वचालित विधानसभा दृष्टिकोण की विचारधारा का विरोध करता है - सब कुछ यथासंभव प्रबंधनीय होना चाहिए। प्रदर्शन विकल्प - भी। पृष्ठ URL के माध्यम से कुछ भी स्विच करने के विकल्प को रोकता नहीं है। हम एक स्विच लिखेंगे, जो लंगर में विकल्प पैरामीटर के आधार पर, पेज लोडिंग के दौरान एक या किसी अन्य स्क्रिप्ट को लोड करेगा। यह एक गतिशील एक-पृष्ठ लोड नहीं है, हालांकि इससे दूर नहीं है, लेकिन पहले से ही कोड में स्विच करने से बेहतर है।

 var lHash = location.hash.substr(1).split('='); if(lHash && lHash.length ==2 && lHash[0] =='option') var optionName = lHash[1]; if(optionName && !parseInt(optionName)) optionName = {closure:1,jsmin:2,uglifyjs:3,coffeescript:4,typescript:5}[optionName.toLowerCase()]; console.log(optionName); optionName = optionName ||0; var loadScript; (loadScript = function(i){ var scr = document.createElement('SCRIPT'); scr.setAttribute('type', 'application/javascript'); scr.src ='scripts/script.' + ('|closure|jsmin-grunt|uglify|coffee.min|typescript.min'.split('|')[i]) +(i?'.':'') +'js'; document.getElementsByTagName('head')[0].appendChild(scr); })(optionName); 

अब हमें कोड में टिप्पणियों का एक गुच्छा मिला, उन्हें पालन करने और स्विच करने की आवश्यकता। एक एंकर # विकल्प = <नंबर> या # विकल्प = <example_name> या एक लापता (या प्रारूप त्रुटि) एंकर जोड़ना, वांछित स्क्रिप्ट को एसीसी में सूचीबद्ध विकल्पों से निष्पादन के लिए बुलाएगा। भविष्य में, आप अपने स्वयं के नामों के तहत अपने स्वयं के विकल्प जोड़ सकते हैं।

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

 var colr = $("#color").val().toUpperCase() , cL = colr.length; for(var i in cL) if(cL[i] <'0'|| cL[i] >'9'&& cL[i] <'A'|| cL[i] >'F') //  hex- break; document.body.style.backgroundColor = (colr.charAt[0] !='#' && i < cL ?'':'#') + colr; 

संभवतः, यह पहली नज़र में मुश्किल लग रहा है, लेकिन यह अब आदिमता के कारण अस्वीकृति का कारण नहीं है। अन्यथा, यह पता चला है कि हम नवीनतम बिल्ड तकनीकों का उपयोग करते हैं, और हम कोड में एक अनुकूल इंटरफेस व्यक्त करने में सक्षम नहीं हैं। बाद में, हम अपनी इच्छाओं को और अधिक उन्नत कोड में औपचारिक रूप देने में सक्षम होंगे, हमारे कोड के लिए एक आदिम लोडस्क्रिप्ट और एंकर रीडर नहीं होगा, यह सब एक कॉफी स्क्रिप्ट में लिखें और इसे हमारे बिल्ड लाइब्रेरी में संग्रहीत करें। आखिरकार, हम आदिमता के समझौतों से असहमत होने की इच्छा से परियोजनाओं की विधानसभा में आते हैं और केवल अमूर्त के जटिल तर्क को प्रदर्शित करते हैं।

विकल्प 1: क्लोजर कंपाइलर

Google क्लोजर कंपाइलर एक जावास्क्रिप्ट अनुकूलन उपकरण है। यह कोड का विश्लेषण करता है, अनावश्यक टुकड़ों को हटाता है, और बाकी को छोटा करता है। इसके अलावा, एक सोर्स मैप जेनरेट किया जा सकता है।

स्क्रिप्ट का एक अनुकूलित संस्करण बनाने के लिए हम निम्नलिखित कदम उठाते हैं:

• नवीनतम क्लोजर कंपाइलर डाउनलोड करें;
• हमने स्क्रिप्ट के साथ compiler.jar फ़ाइल को डायरेक्टरी में रखा है;
• कमांड प्रॉम्प्ट पर, " scripts/ " निर्देशिका पर जाएं और scripts/ बनाने के लिए कमांड निष्पादित करें। script.closure.js फाइल जो कि अनुकूलित है और उत्पादन में निष्पादन के लिए तैयार है।

 java -jar compiler.jar --js script.js --js_output_file script.closure.js 

• हम यह सुनिश्चित करते हैं कि index.html "विकल्प A" को असम्बद्ध करके बनाई गई फ़ाइल से संबद्ध है।

जब हम एक ब्राउज़र में index.html खोलते हैं और डेवलपर टूल में स्रोत पैनल को देखते हैं, तो केवल स्क्रिप्ट script.closure.js के अनुकूलित संस्करण का लिंक होता है; हमारे पास आवश्यक इंडेंटेशन के साथ मूल कोड फ़ाइल के साथ संचार करने का कोई तरीका नहीं है। अब स्क्रिप्ट निर्देशिका में निम्नलिखित कमांड निष्पादित करके कोड कार्ड फ़ाइल बनाएं:

 java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format=V3 --js_output_file script.closure.js 

ध्यान दें कि क्लोजर कंपाइलर 2 विकल्प - --create_source_map और --source_map_format का उपयोग करके एक --source_map_format है। स्रोत मानचित्र संस्करण 3 के साथ एक --source_map_format मैप script.closure.js.map । लेकिन यह सब नहीं है। प्रभाव को देखने के लिए, संकलित script.closure.js के अंत में स्रोत URL जोड़ें। script.closure.js फ़ाइल script.closure.js इसमें उनके स्थान के बारे में डेटा हो।

 //@ sourceMappingURL=script.closure.js.map 

अब डेवलपर पैनल के माध्यम से ब्राउज़र में लिपियों को देखने से दोनों फाइलें दिखाई देंगी - मूल और अनुकूलित script.closure.js । हालांकि ब्राउज़र एक अनुकूलित फ़ाइल का उपयोग करता है, लेकिन स्रोत मानचित्र आपको इसे स्रोत कोड से लिंक करने की अनुमति देता है।

ब्रेकपॉइंट के साथ डिबगिंग का प्रयास करें। स्रोत को देखने पर अभी तक देखे गए भाव और चर उपलब्ध नहीं हैं। चलो आशा करते हैं कि भविष्य में वे दिखाई देंगे!

सिरिलिक उपयोगकर्ताओं को एक और जाम को नोटिस करने का सौभाग्य मिला है, यहां तक ​​कि दो: ब्राउज़र में एक, कंपाइलर में अन्य। मैपिंग द्वारा भरी गई फ़ाइल में ब्राउज़र UTF-8 वर्ण प्रदर्शित नहीं करता है:



कंपाइलर और भी बदतर है: सिरिलिक वर्णों को एक त्रुटि मानते हैं, इसलिए उन्हें संकलन (यदि संभव हो) से पहले हटा दिया जाना चाहिए।

विकल्प 2: JSMin के लिए ग्रंटज टास्क

यदि आप पहले से ही परियोजनाओं के निर्माण के लिए Grunt.js का उपयोग कर रहे हैं, तो अब यह JSMin प्रोग्राम के कोड कार्ड के लिए उपयोगी है। कोड न केवल खनन किया जाएगा, बल्कि एक कोड कार्ड भी बनाया जाएगा। (यह याद रखना चाहिए कि Grunt संस्करण 0.4 का कार्य आलेख में वर्णित संस्करण 0.3 से अलग है। - नोट।)

चरण दिखाते हैं कि Grunt का उपयोग करके JSMin प्लगइन के साथ एक अनुकूलित संस्करण कैसे बनाया JSMin ।

1. ग्रंट स्थापित करें और " start/ " निर्देशिका की जड़ में स्थित gruntfile नामक grunt.js gruntfile में चलाएं ( वैकल्पिक ताजा विवरण )।

 $ npm install -g grunt $ npm view grunt version npm http GET https://registry.npmjs.org/grunt npm http 200 https://registry.npmjs.org/grunt 0.3.17 $ grunt init:gruntfile 

ग्रंट 0.4.x के साथ कैसे काम करें

यदि आपके पास एक पुराना संस्करण स्थापित है, लेकिन आप इसे 0.4.x पर अपग्रेड करना चाहते हैं, तो स्थापना प्रक्रिया अलग होगी। सबसे पहले, ग्रन्ट 0.3.x के पुराने संस्करण की स्थापना रद्द करें (यदि यह वैश्विक रूप से स्थापित किया गया था)।

 npm uninstall -g grunt 

चलो ग्रंट 0.4 ​​में कार्यों की स्थापना पर करीब से नज़र डालें, क्योंकि यह लंबे समय तक मुख्य निर्माण उपकरणों में से एक होगा।

अब नए संस्करण में ग्रंट मॉड्यूल को कई मॉड्यूल में विभाजित किया गया है - कर्नेल से सभी एप्लिकेशन कोड लेने के लिए कर्नेल और प्लग-इन। कई मॉड्यूल स्थापना में शामिल हैं।

वैश्विक ग्रन्ट-क्ली मॉड्यूल के रूप में कमांड लाइन इंटरफ़ेस स्थापित करें।

 npm install -g grunt-cli 

यह परियोजनाओं में कार्य शुरू करने के लिए पर्याप्त नहीं है - प्रत्येक परियोजना में आपको ग्रंटफाइल फ़ाइल में कार्यों का वर्णन करने की आवश्यकता है। यदि पहले इसे grunt.js कहा जाता था, तो नए संस्करण में - Gruntfile.js या Gruntfile.cfish। परियोजना की जड़ में दूसरी आवश्यक फ़ाइल पैकेज है। निर्भरता की सूची के साथ npm (Node.js पैकेज मैनेजर) में इस्तेमाल किया गया।

प्रत्येक कार्य में, प्रोजेक्ट फ़ोल्डर में एक स्थानीय ग्रन्ट मॉड्यूल स्थापित किया गया है।

 npm install grunt 

इसलिए, हम कमांड लाइन पर "प्रारंभ /" फ़ोल्डर में जाएंगे और वहां निर्दिष्ट कमांड चलाएंगे। जैसा कि 0.3.x संस्करण में, नोड_मॉडल फ़ोल्डर दिखाई देगा और इसमें ग्रंट मॉड्यूल फ़ोल्डर होगा।

परियोजनाओं के लिए मुख्य कोड का प्रसार एक ही कंप्यूटर पर sbrowser के विभिन्न संस्करणों को चलाने में सक्षम होने के उद्देश्य से किया गया था। ग्रंट-क्ली केवल एक शेल है जो वांछित प्रोजेक्ट फ़ोल्डर में एक कमांड लॉन्च करता है। ( gruntjs.com/getting-started )

अगला, परियोजना की जड़ में ("शुरू /") हम Gruntfile.js और package.json तैयार करते हैं। package.json आपकी परियोजना के साथ जुड़ा होगा और यह निर्भरता का वर्णन करेगा - प्लगइन बिल्डर की आवश्यकताएं। हमारी परियोजना के लिए हम लिखेंगे:

 { "name": "colors", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-jsmin-sourcemap": "~1.5.6" } } 

संस्करण 0.3.x के लिए निम्नलिखित पैराग्राफ 2 के बजाय, आपको निष्पादित करने की आवश्यकता होगी

 npm install grunt --save-dev 

package.json से सभी निर्भरता को ऊपर खींचने के लिए।

2. (संस्करण 0.3.x के लिए)। ग्रन्ट-जेस्मिन-सोर्समैप प्लगइन स्थापित करें। यह node_modules/grunt-jsmin-sourcemap ।

 $ npm install grunt-jsmin-sourcemap 

3. निर्मित grunt.js संपादित करें (संस्करण 0.4 के लिए - "प्रारंभ /" में Gruntfile.js बनाएं) ताकि इसमें केवल jsmin-sourcemap - हम इसे यथासंभव सरल करेंगे:

 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-jsmin-sourcemap'); grunt.initConfig({ 'jsmin-sourcemap': { all: { src: ['scripts/script.js'], dest: 'scripts/script.jsmin-grunt.js', destMap: 'scripts/script.jsmin-grunt.js.map' } } }); grunt.registerTask('default', 'jsmin-sourcemap'); }; 

4. कमांड लाइन पर लौटें और ग्रंट चलाएं:

 E:\Projects\nodeJS\SourceMaps101\start> grunt 

यह jsmin-sourcemap कार्य को grunt.js (या Gruntfile.js ) फ़ाइल में तैयार डिफ़ॉल्ट कार्य के रूप में निष्पादित करेगा। एक सफल परिणाम के मामले में:

 Running "jsmin-sourcemap:all" (jsmin-sourcemap) task Done, without errors. 

अगला, हम लेखक के परिणामों को अलग करने के लिए निष्पादन परिणामों को पूर्ण-बर्बाद निर्देशिका में जोड़ देंगे, जो मुख्य रूप से ग्रंट के नए संस्करण के कारण अलग होगा। यह उन परिणामों के साथ आपके परिणामों की तुलना करने में मदद करेगा जो उदाहरणों को चलाते समय विंडोज पर प्राप्त किए गए थे। - लगभग।

5. सुनिश्चित करें कि स्रोत फ़ाइल उत्पन्न स्रोत मानचित्र script.jsmin-grunt.js.map फ़ाइल में लिखा गया है: "sources":["script.js"] ।
(वास्तव में, "sources":["scripts/script.js"] वहां पंजीकृत थे "sources":["scripts/script.js"] , इसलिए आपको इसे अपने हाथों से ठीक करना चाहिए। - लगभग।

6. जेनरेट किए गए script.grunt-jsmin.js फ़ाइल को index.html से जोड़ने के लिए Uncomment Option B और इसे एक ब्राउज़र में खोलें।

(यह एंकर के साथ संशोधित इंडेक्स- ru.html फ़ाइल को कॉल करने के लिए पर्याप्त है: लोकलहोस्ट / इंडेक्स- ru.html # विकल्प - jsmin । - लगभग । अनुवाद ।)

इस उदाहरण में, हमें स्रोत फ़ाइल की मैपिंग भी मिली - यह कुछ भी नहीं है कि हमने कलेक्टर की स्थापना के माध्यम से अपना रास्ता बनाया। यह आगे आसान होगा, मुख्य उपकरण हमारी जेब में है।

जैसा कि आप यहां देख सकते हैं, हम असेंबली जाम का निरीक्षण करते हैं, जो कि, यदि उपयोग किया जाता है, तो सुधारों का पालन करने के लिए सर्वर-साइड स्क्रिप्ट और संस्करण के साथ संस्करण को सही करना होगा। यह तत्परता के शुरुआती चरणों में औजारों के साथ इस तरह का विकास है, और साथ ही, बाजार द्वारा इसकी बहुत मांग है।

Grunt और jsmin-sourcemap बिल्ड प्रक्रिया 2 फाइलें बनाती है: अंत में मैपिंग फ़ाइल के लिंक के साथ एक अनुकूलित स्क्रिप्ट और कोड कार्ड फ़ाइल स्वयं। पिछले संस्करण के समान, स्रोत को देखने के लिए आपको दोनों फ़ाइलों की आवश्यकता होगी।

विकल्प 3: UglifyJS

UglifyJS2 एक और जेएस ऑप्टिमाइज़र-कंप्रेसर है। पिछले 2 मामलों की तरह, एक अनुकूलित स्क्रिप्ट फ़ाइल बनाई गई है, कोड कार्ड URL और मैप फ़ाइल को स्वयं जोड़ा जाता है, जिसमें संपीड़ित और मूल जावास्क्रिप्ट ऑपरेटरों के बीच पत्राचार होता है। उपयोग करने के लिए, " start " निर्देशिका में चलाएं:
1. uglify-js मॉड्यूल स्थापित करें ( nocde_module/uglify-js निर्देशिका nocde_module/uglify-js ):

 $ npm install uglify-js -g $ npm view uglify-js version 2.2.3 $ cd scripts/ 

2. " scripts " निर्देशिका में, अनुकूलित संस्करण और मानचित्र बनाने के लिए कमांड निष्पादित करें:

 uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js 

(इस बार - हाथों से कोई शर्मिंदगी नहीं, सब कुछ काम करता है।)

3. index.html विकल्प C विकल्प को अनइंस्टॉल करें।

विकल्प 4: कॉफीस्क्रिप्ट Redux

चूंकि लेखन के समय, जेरेमी एशकेनस द्वारा मूल कॉफ़सीस्क्रिप्ट निर्माण ने मैपिंग का समर्थन नहीं किया था, मैपिंग के साथ काम करने वाले एक क्लोन का उपयोग किया गया था। कॉफ़ीस्क्रिप्ट 1.6.1+ में, आप मूल भाषा का उपयोग कर सकते हैं (जो कि, हालांकि, क्लोन के अन्य लाभों को कम नहीं करता है)।

इस क्लोन ने, आगे के विकास के लिए किकस्टार्टर पर एक लक्ष्य के रूप में घोषित $ 12 हजार को सफलतापूर्वक एकत्र किया।

पहले 3 विकल्पों में, केवल 1 अनुकूलन चरण की आवश्यकता थी। कॉफीस्क्रिप्ट जैसी भाषाओं के लिए, आपको 2 चरणों की आवश्यकता है: कॉफीस्क्रिप्ट से जावास्क्रिप्ट तक, और फिर जेएस को अनुकूलित करने के लिए। आइए देखें कि कॉफ़ीस्क्रिप्ट से और कॉफ़ीस्क्रिप्ट Redux संकलक से (क्योंकि मूल कॉफ़िशस्क्रिप्ट ने संस्करण 1.6.1 के लगभग कार्ड का समर्थन नहीं किया था - बहु-स्तरीय कोड कार्ड कैसे बनाया जाता है। लगभग।) ।

चरण 1: कॉफीस्क्रिप्ट से सरल जावास्क्रिप्ट तक

कमांड लाइन पर " start " निर्देशिका पर जाएं। अगले चरणों में, हम अनुकूलित और स्रोत कोड फ़ाइल के बीच एक पत्राचार फ़ाइल बनाएंगे।
1. वैश्विक कॉल सुविधा के -g विकल्प के साथ कॉफीस्क्रिप्ट स्थापित करें।
2. सरल JS में संकलन script.coffee.coffee ।

 $ coffee -c scripts/script.coffee.coffee 

3. स्थापित कॉफीस्क्रिप्ट Redux :

 $ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm install $ make -j test $ cd .. 

4. एक script.coffee.js.map बनाएं। script.coffee.js.map मैपिंग script.coffee.js.map जिसमें सादे JS और मूल CoffeeScript के बीच पत्राचार का वर्णन है।

 $ coffee-redux/bin/coffee --source-map -i scripts/script.coffee.coffee > scripts/script.coffee.js.map 

5. सुनिश्चित करें कि script.coffee.js फ़ाइल के अंत में कोड कार्ड का URL है:

 //@ sourceMappingURL=script.coffee.js.map 

6. सत्यापित करें कि script.coffee.js.map फ़ाइल में सही फ़ाइल लिंक है:

 "file":"script.coffee.coffee", and source file as "sources":["script.coffee.coffee"] 

कॉफ़ीस्क्रिप्ट के साथ काम करें

कॉफी स्क्रिप्ट क्लोन के साथ काम करने के बजाय, हम मूल संकलक के साथ एक उदाहरण बनाते हैं।
पैराग्राफ 1 और 2 - अपरिवर्तित रहते हैं।
बिंदु 3 - छोड़ें।
4।

 coffee -o script.c -cm script.coffee.coffee 

("-cm" संक्षिप्त रूप से "- कंपाइल" और "--मैप" विकल्प हैं।)
5. शूल।
आउटपुट फ़ाइल के निर्माण के साथ - बस कुछ कीड़े। 1) स्क्रिप्ट.कॉफी.जेएस फ़ाइल नहीं बनाई गई है - इसके बजाय यह स्क्रिप्ट है। जेएस, पहले उदाहरणों से संस्करण को अधिलेखित करना। इसलिए, हम एक अलग निर्देशिका में एक फ़ाइल बनाते हैं (एक कमांड के ढांचे के भीतर एक अलग नाम के साथ एक फ़ाइल बनाने का कोई तरीका नहीं है, अगर हम ओएस में धाराओं पर विचार नहीं करते हैं); 2) यदि कोई निर्देशिका नहीं है, तो "बाएं" खाली निर्देशिका "/ -p /" आवश्यक एक के साथ बनाई गई है।

रास्तों की जाँच करने के लिए, यह इस मध्यवर्ती परिणाम को चलाने के लायक है, जो 6 के उदाहरण की तरह दिखेगा - असम्पीडित कॉफ़ीस्क्रिप्ट, और इसमें पथों की जाँच करना सही है।

यदि हम एक कमांड (और दो अलग-अलग नहीं) के साथ एक कोड मैप बनाते हैं, तो संकलित फ़ाइल के अंत में फॉर्म की एक टिप्पणी है

 /* //@ sourceMappingURL=script.map */ 

यह पता चला कि क्रोम भी इस तरह की टिप्पणी पढ़ता है।
और "फ़ाइल": "script.js" और कोड कार्ड के अन्य रास्तों को भी बदलने की आवश्यकता नहीं है। वहाँ है:

  "file": "script.js", "sourceRoot": "..", "sources": [ "script.coffee.coffee" ], 

शुरू करने के लिए, उन्होंने इस तरह के एक अजीब निर्देशिका नाम, script.c को पूर्व-चयनित किया, ताकि यह पहले से निर्मित स्क्रिप्ट में अच्छी तरह से फिट हो।

 var lHash = location.hash.substr(1).split('='); if(lHash && lHash.length ==2 && lHash[0] =='option') var optionName = lHash[1]; if(optionName && !parseInt(optionName)) optionName = {closure:1,jsmin:2,uglifyjs:3,coffeescript:4,typescript:5,'coff':6}[optionName.toLowerCase()]; console.log(optionName); optionName = optionName ||0; var loadScript; (loadScript = function(i){ var scr = document.createElement('SCRIPT'); scr.setAttribute('type', 'application/javascript'); scr.src ='scripts/script.'+ ('|closure|jsmin-grunt|uglify|coffee.min|typescript.min|c/script'.split('|')[i]) +(i?'.':'') +'js'; document.getElementsByTagName('head')[0].appendChild(scr); })(optionName); 

पैरामीटर 6 या coff पथ scripts/script.c/script.js से scripts/script.c/script.js पढ़ी जाएगी। हम देखते हैं कि निर्देशिका में एक मध्यवर्ती फ़ाइल के निर्माण के बावजूद, पैच के बिना सब कुछ काम करता है। अच्छा काम संकलक लेखक!

यह कैसे कॉफी स्क्रिप्ट क्रोम के डिबगिंग में दिखता है।

यह देखा जा सकता है कि क्रोम अभी भी utf-8 को बिल्कुल भी नहीं समझता है। scr.setAttribute('charset', 'utf-8'); मदद भी नहीं करता है।

चरण 2: सादे जावास्क्रिप्ट से लेकर जेएस तक

1. अंत में, JS को कंप्रेस करने और कोड कार्ड बनाने के लिए UglifyJS का उपयोग करें। इस बार, कलेक्टर एक कॉफीस्क्रिप्ट कोड कार्ड स्वीकार करेगा ताकि हम स्रोत कोड प्राप्त कर सकें। " scripts " में कमांड चलाएँ:

 $ cd scripts/ $ uglifyjs script.coffee.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.coffee.js.map 

उदाहरणों की हमारी शाखा के लिए कमांड का प्रकार है

 uglifyjs script.c/script.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.c/script.map 

2. सुनिश्चित करें कि कोड कार्ड फ़ाइल में फॉर्म का सही लिंक है

 "file":"script.coffee.min.js" 

... और फार्म के स्रोत कोड के लिए सही लिंक

 "sources":["script.coffee.coffee"] 

हम एड्रेस बार में लिखते हैं

 http://localhost/#option=coffeescript 

... और हम देखते हैं कि फ़ाइल में कुछ गलत है। "sources":["script.coffee.coffee"] को काम करना चाहिए, लेकिन यह काम नहीं किया। लेकिन मैं स्रोत फ़ाइल को देखकर लिखने में कामयाब रहा (मुझे ब्राउज़र को फिर से खोलने की आवश्यकता थी)

 "sources":["/scripts/script.coffee.coffee"] 

फिर भी, स्क्रिप्ट। निर्देशिका script.c साथ जटिल रास्ते, और बंडल में मिनिफ़ायर उस तरह से काम नहीं करता है, मुझे इसे संपादित करना था, और यह संपादन कच्चे उत्पाद की हैक की तरह दिखता है।

विकल्प 5: टाइपस्क्रिप्ट

टाइपस्क्रिप्ट, कॉफ़ीस्क्रिप्ट की तरह, भी 2 चरणों की आवश्यकता होती है: टाइपस्क्रिप्ट -> सरल जावास्क्रिप्ट -> न्यूनतम जावास्क्रिप्ट। चूंकि स्क्रिप्ट jQuery प्लगइन का उपयोग करती है, इसलिए आपको script.typescript.ts और jquery.d.ts नामों के साथ 2 टाइपस्क्रिप्ट फ़ाइलों की आवश्यकता होगी।

टाइपस्क्रिप्ट स्थापना:

 npm install -g typescript 

चरण 1: टाइपस्क्रिप्ट से सादे जावास्क्रिप्ट तक

कमांड लाइन मोड में स्क्रिप्ट निर्देशिका पर जाएं और चलाएं:

 $ tsc script.typescript.ts -sourcemap 

कमांड एक script.typescript.js फ़ाइल script.typescript.js जिसके अंत में एक लिंक होगा:

 //@ sourceMappingURL=script.typescript.js.map 

और उसी कमांड में script.typescript.js.map मैप फाइल बनाई जाती है।

Crhbgn ने jQuery और हमारे कोड में एक के लिए कुछ मापदंडों के बेमेल के बारे में शिकायत की:

/script.typescript.ts(7,8): प्रकार 'JQueryEventObject' के मूल्य पर संपत्ति 'कीकोड' मौजूद नहीं है

लेकिन उन्होंने नौकरी स्वीकार कर ली; फ़ाइल जिसे जावास्क्रिप्ट ने वास्तव में संसाधित किया है।

स्रोत कोड परिवर्तन देखने के लिए, आपको अपना ब्राउज़र कैश साफ़ करना होगा।

चरण 2: सादे जावास्क्रिप्ट से लेकर जेएस तक

CoffeweScript के साथ, अगला चरण UglifyJS का उपयोग करता है:

 $ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map 

सुनिश्चित करें कि index.html में लिंक सही स्क्रिप्ट फ़ाइल को इंगित करें: scripts/script.typescript.min.js और इसे एक ब्राउज़र में खोलें।

कंपाइलर और मिनिफ़ायर से संबंधित त्रुटियों को इस सरल कोड पर ध्यान नहीं दिया गया। स्रोत कोड और मैपिंग सेवा फ़ाइलों के मैनुअल संपादन के बिना काम करते हैं।

SASS के लिए कोड कार्ड

जावास्क्रिप्ट के अलावा, क्रोम वर्तमान में कोड कार्ड के लिए एसएएसएस और एससीएसएस का समर्थन करता है। SASS मैपिंग के लिए, चलो क्रोम में कुछ सेटिंग्स बदलते हैं और फिर SASS को डीबगिंग विकल्पों के साथ CSS में संकलित करते हैं।

1. किसी भी सेटिंग्स को बदलने से पहले, कृपया ध्यान दें कि डेवलपर टूल विंडो से एक तत्व का अवलोकन करते समय, हम केवल सीएसएस के लिए एक लिंक देखेंगे। यह वह नहीं है जो आपको चाहिए।

2. क्रोम पर जाएं: // झंडे /।
3. " डेवलपर टूल प्रयोग सक्षम करें" इंस्टॉल करें (क्रोम के रूसी संस्करण में - "प्रयोगात्मक डेवलपर टूल सक्षम करें")।

विंडोज पर:



4. ओपन Dev Tools -> Setting -> Experiments -> Check “Support for SASS” ।

विंडोज पर:
सेटिंग्स (-) -> उपकरण -> डेवलपर उपकरण -> सेटिंग्स () निचले दाएं कोने में) -> प्रयोग -> सैस के लिए समर्थन ।



5. हम कमांड लाइन पर " styles " निर्देशिका में ऐसे डिबगिंग विकल्पों के साथ एसएएस को संकलित करते हैं। यह प्रत्येक नियम को @media -sass-debug-info साथ सेट करेगा

 $ cd styles/ $ sass --debug-info --watch style.sass:style.css 

6. सत्यापित करें कि डेवलपर टूल विंडो फिर से खोल दी गई है और पृष्ठ पुनः लोड हो गया है।
7. अब, जब हम Dev.Tools में तत्व की जाँच करते हैं, तो हम SASS फ़ाइल का उपयोग देखेंगे।

केवल SASS को देखने के अलावा, यदि LiveReload पृष्ठभूमि में चल रहा है, तो जब SASS फ़ाइल बदली जाती है, तो पृष्ठ भी बदल जाएगा।

अब - फ़ायरफ़ॉक्स में प्रोजेक्ट खोलें और फायरबग के माध्यम से देखें। यह SASS फाइल देखने के लिए भी उपलब्ध होगा।

कोड कार्ड की जानकारी

यदि हम किसी *.map फ़ाइल को देखते हैं, तो उसमें स्रोत फ़ाइल और परिणामी के बीच जानकारी की मैपिंग होगी। संरचना, एक नियम के रूप में, संस्करण 3 के मानचित्रों के विनिर्देश के अनुसार JSON प्रारूप में निहित है। आमतौर पर, 5 गुण हैं:
1. संस्करण : नक्शे का संस्करण (आमतौर पर 3)।
2. फ़ाइल : आउटपुट फ़ाइल का नाम।
3. स्रोत : स्रोत फ़ाइल का नाम।
4. नाम : मैचों के लिए उपयोग किए जाने वाले अक्षर।
5. मैपिंग : मैच डेटा।

संबंधित लिंक

कोड कार्ड अभी भी सक्रिय विकास के अधीन हैं, लेकिन वेब पर पहले से ही कुछ उल्लेखनीय संसाधन हैं। अधिक जानने के लिए इन लिंक को अवश्य देखें।

• रेयान सेड्डन, एचटीएमएल 5 रॉक्स, 21 मार्च, 2012 द्वारा जावास्क्रिप्ट स्रोत मानचित्रों का परिचय ; अनुवाद ।
• ब्रेकपॉइंट एपिसोड 3: Google डेवलपर टीम द्वारा जावास्क्रिप्ट सोर्स मैप्स
• ब्रेकपॉइंट एपिसोड 2: Google डेवलपर टीम द्वारा सोर्स मैप्स
• सोर्स मैप्स भाषाओं, उपकरणों, लेखों पर स्रोत मैप्स पर विकी
• रयान सेडॉन द्वारा कॉफीस्क्रिप्ट और टाइपस्क्रिप्ट के साथ मल्टी लेवल सोर्स मैप्स
• स्रोत मानचित्र संस्करण 3 प्रस्ताव

निष्कर्ष

मुझे उम्मीद है कि कई संकलक के उपयोग के अभ्यास ने कोड कार्ड की क्षमता को दिखाया है। यद्यपि कार्यक्षमता अब सीमित है, भविष्य में चर और अभिगम के रूप में पूर्ण डिबगिंग की संभावना की उम्मीद है।

: Sayanee Basu, . Ruby . — .


, « » — . ; — nodeJS . , , , — , nodeJS. . , , - , , .

( , Firefox .)

? Coffeescript, . , 2 , , JS.

Grunt, , SASS — . , , , . , — , , , .

, , , nodeJS, - .

, Windows + nodeJS.

1) Using Source Maps with TypeScript , Aaron Powell, Oct 3 2012;
2) github.com/mozilla/source-map — This is a library to generate and consume the source map format .
3) Happy debugging with JavaScript source maps by James Allardice, 25 January 2013.
4) bower.io — Twitter.
5) kevinpelgrims.com/blog/2011/12/28/building-coffeescript-with-sublime-on-windows
6) sourcemap.litcoffee .
7) github.com/evanw/node-source-map-support
8) , (2013-05)