👨‍🚒 🛌🏻 🔳 आधुनिक जावास्क्रिप्ट: एक साइड व्यू 🤸🏼 😫 📂

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

यह कुछ इस तरह था ...

नोट: पैकेज और लोगों के नाम उनकी पहचान की रक्षा के लिए बदल दिए गए हैं। मैंने कई मुद्दों को भी छोड़ दिया जो इस पैकेज के लिए बहुत विशिष्ट थे। कुछ त्रुटियां स्मृति से पुनर्प्राप्त की जाती हैं, इसलिए मुझे बताएं कि क्या मैंने कुछ गलत समझा है।

जॉन : अरे, मैं इस एल्गोरिथ्म की कोशिश करना चाहता हूं जो मुझे जीथब पर मिला था। वह कहता है कि क्या उपयोग करने की आवश्यकता है import functionName packageName, और फिर कहा जाता है functionName()। सब कुछ बहुत सरल लगता है! मुझे वास्तव में उपयोगकर्ता इंटरफ़ेस की आवश्यकता नहीं है, इसलिए मैं नोड का उपयोग करूंगा!

मुझे (लिआ): बेशक, नोड एक अच्छी रूपरेखा की तरह लगता है!

जॉन npm install packageName --saveREADME द्वारा अनुशंसित के रूप में लॉन्च करता है। तब node index.js।

नोड:

चेतावनी: ES मॉड्यूल लोड करने के लिए, "type" सेट करें: package.json में "मॉड्यूल" या .mjs एक्सटेंशन का उपयोग करें।
SyntaxError: किसी मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं कर सकता

जॉन: लेकिन मेरे पास कोई पैकेज नहीं है। आगजनी ...

लिआ:npm init इसे चलाएं , यह इसे उत्पन्न करेगा!

जॉन शुरू होता है npm init, इंस्टॉलेशन विज़ार्ड के माध्यम से जाता है, इसे मैन्युअल रूप type: "module"से उत्पन्न पैकेज में जोड़ता है । json।

जॉन ने लॉन्च किया node index.js।

नोड:

SyntaxError: किसी मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं कर सकता

अजीब तरह से पर्याप्त है, इस बार परियोजना के आंतरिक मॉड्यूल ने एक त्रुटि फेंक दी। वॉट!

ली: ठीक है, नरक में, बस इसे एक ब्राउज़र में चलाएं, यह ईएस 6 मॉड्यूल है, बस एक साफ जेएस एल्गोरिथ्म है जो नोड एपीआई का उपयोग नहीं करता है, इसे काम करना चाहिए।

जॉन एक लाइन के साथ एक सरल index.html पेज बनाता है <script type="module" src="index.js">और इसे एक ब्राउज़र में लोड करता है।

सांत्वना में कुछ नहीं। TA-दाह।

ली: ठीक है, हाँ, आपको पैकेजनाम आयात करने के लिए मॉड्यूल पथ को कॉन्फ़िगर करने की आवश्यकता है। नोड हल करने के लिए विशेष चीजें करता है node_modules, इसलिए ब्राउज़र में आपको स्वयं स्पष्ट मार्ग निर्दिष्ट करने की आवश्यकता है।

जॉन उसकी फ़ाइलों को देख रहा है, लेकिन वहां कोई नोड_मॉड्यूल निर्देशिका नहीं है।

Lea: ठीक है, हाँ, आपने इसे शुरू किया था npm installइससे पहले कि आप दिखाई दें package.json, शायद यह बात है! पुनः प्रयास करें!

जॉन ने जॉन को फिर से शुरू किया npm install packageName --save

: ओह, अब नोड_मॉड्यूल निर्देशिका दिखाई दी है!

जॉन सख्त तरीके से नोड_मॉडल्स में एक प्रवेश बिंदु की तलाश में है। इसके बाद यह अपने सूचकांक को संपादित करता है। तदनुसार इसे फिर से लोड करता है।

फ़ायरफ़ॉक्स:

गलत MIME प्रकार: टेक्स्ट / html

LE: बेशक, यह आपके लिए खुलता है file://! मेरे मित्र, आप बिना लोकलहोस्ट के हमारे समय में कैसे रहते हैं? वर्तमान में, जावास्क्रिप्ट का उपयोग file://कड़ाई से सीमित है।

जॉन: लेकिन मैं क्यों हूं ... ठीक है, मैं एक लोकलहोस्ट चलाऊंगा।

जॉन स्थानीय होस्ट चलाता है, पर उसकी index.html खोलता स्थानीय होस्ट : 80।

फ़ायरफ़ॉक्स:

गलत MIME प्रकार: टेक्स्ट / html

जॉन (आह) । पाठ / जावास्क्रिप्ट प्रकार के साथ JS फाइल जारी करने के लिए लोकलहोस्ट को कॉन्फ़िगर करने की आवश्यकता है?

Lea: क्या? नहीं! वह जानता है। हम्म ... नेटवर्क्स टैब देखें। मुझे संदेह है कि वह आपका मॉड्यूल नहीं ढूंढ सकता है, इसलिए वह 404 HTML पृष्ठ लौटाता है, और फिर शिकायत करता है कि यह पृष्ठ नहीं है text/javascript।

नोड_मॉडल को फिर से देखता है, पथ को सही करता है। यह पता चला है कि वीएस कोड केवल एक उपनिर्देशिका के साथ निर्देशिकाओं को ध्वस्त करता है, इसलिए हमने इस पर ध्यान नहीं दिया।

वास्तव में, मुझे लगता है कि यह वीएस कोड की ओर से वास्तव में अच्छा प्रयोज्य सुधार है, यह दक्षता में सुधार करता है, लेकिन उन्हें चीजों को और अधिक दृश्यमान बनाना चाहिए।

फ़ायरफ़ॉक्स:

औपचारिक मापदंडों के बाद SyntaxError: लापता)

Lea: क्या? यह स्रोत पैकेज से है, यह आपकी गलती नहीं है। मुझे समझ नहीं आया ... क्या मैं इस लाइन को देख सकता हूँ?

जॉन ने

ली की गलती का कारण बनने वाली लाइन पर क्लिक किया : ओह माय गॉड। यह जावास्क्रिप्ट नहीं है, यह टाइपस्क्रिप्ट है !!! एक्सटेंशन के साथ .js !!!

जॉन: हाँ, मैं इस एल्गोरिथ्म का परीक्षण करने के लिए कोड की एक पंक्ति चलाना चाहता था ...

जॉन ने हार मान ली। उन्होंने निष्कर्ष निकाला कि नोड, एनपीएम या ईएस 6 मॉड्यूल को कभी नहीं छूना सबसे अच्छा है।

समाप्त।

कृपया ध्यान दें कि जॉन एक कंप्यूटर वैज्ञानिक है, जो वेब के बारे में काफी कुछ जानता है: उसके पास Node & npm स्थापित था, वह जानता था कि MIME प्रकार क्या थे, वह जरूरत पड़ने पर लोकलहोस्ट शुरू कर सकता है। क्या newbies के लिए उम्मीद कर सकते हैं?

आधुनिक जावास्क्रिप्ट: एक साइड व्यू

More articles: