Velo: npm पैकेज के साथ काम करना

ऑनबोर्ड होने और आगे सीखने के लिए Velo by Wix वेबसाइट पर जाएं।

दोबारा इस्तेमाल किए जा सकने वाले JavaScript कोड की सबसे लोकप्रिय रजिस्ट्री npm है। npm में, दोबारा इस्तेमाल की जा सकने वाली हर कोड लाइब्रेरी को पैकेज कहा जाता है। Velo की मदद से आप अपनी साइट पर अप्रूव किए गए npm पैकेज इंस्टॉल कर सकते हैं। Velo साइट्स के लिए उपयोगी ज़्यादातर पैकेज पहले ही अप्रूव किए जा चुके हैं। अगर आप जिस पैकेज का इस्तेमाल करना चाहते हैं, वह अभी तक अप्रूव नहीं हुआ है, तो उसे लिस्ट में जोड़ने की रिक्वेस्ट कर सकते हैं। इंस्टॉल होने के बाद, आप पैकेज को इंपोर्ट करके अपने कोड में इस्तेमाल कर सकते हैं।

पैकेज इंस्टॉल करना

पैकेज इंस्टॉल करने के लिए:

Velo साइडबार में कोड फ़ाइल्स बटन पर क्लिक करें।

पैकेज में npm पर होवर करें, प्लस आइकन पर क्लिक करें और npm से पैकेज इंस्टॉल करें चुनें।
पैकेज मैनेजर खुल जाएगा।
npm सेक्शन में, वह पैकेज सर्च करें जिसे आप अपनी साइट में जोड़ना चाहते हैं। ध्यान रखें कि Wix साइट्स में इस्तेमाल किए जाने वाले 10 सबसे लोकप्रिय npm पैकेज दिखाए जाते हैं। इन पैकेज का इस्तेमाल अपनी Wix साइट में करने के निर्देश, पैकेज मैनेजर में पैकेज की रीडमी के ऊपर दाईं ओर उपलब्ध होते हैं।
देखें कि आपकी पसंद के पैकेज के आगे इंस्टॉल बटन मौजूद है या नहीं।
- अगर इंस्टॉल बटन मौजूद है, तो ये स्टेप फ़ॉलो करें:
  1. इंस्टॉल पर क्लिक करें। 'इंस्टॉल' बटन का टेक्स्ट बदलकर 'देखें' हो जाएगा और इंस्टॉल किया गया पैकेज, Velo साइडबार के npm पैकेज सेक्शन में जुड़ जाएगा।
  2. देखें पर क्लिक करें। पैकेज की रीडमी कोड पैनल में खुल जाएगी और आप Velo साइडबार के पैकेज सेक्शन में पैकेज का फ़ाइल स्ट्रक्चर देख सकेंगे।
- अगर इंस्टॉल बटन मौजूद नहीं है, तो पैकेज अभी तक अप्रूव नहीं हुआ है। पैकेज पर होवर करें और और दिखाएं आइकन पर क्लिक करें। रिक्वेस्ट फ़ॉर्म खोलने के लिए रिक्वेस्ट चुनें। रिक्वेस्ट फ़ॉर्म भरकर सबमिट करें। ऐसी वर्ज़न संख्या ज़रूर डालें जो npm रजिस्ट्री में मौजूद हो।

नोट्स

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

इंस्टॉल किए गए पैकेज का इस्तेमाल करना

इंस्टॉल किए गए पैकेज का इस्तेमाल करने के लिए, उसे अपने कोड में इंपोर्ट करें। हर पैकेज का इंपोर्ट स्टेटमेंट अलग होगा। कौन-सा इंपोर्ट स्टेटमेंट इस्तेमाल करना है, इसका तरीका जानने के लिए पैकेज का बाहरी डॉक्यूमेंटेशन देखें।

उदाहरण के लिए, मान लें कि lodash पैकेज इंस्टॉल किया गया है, तो आप इसकी फ़ंक्शनैलिटी का इस्तेमाल इस तरह कर सकते हैं:

1// Import the package in your code:
2import _ from 'lodash';
3
4// Use the following code to union two arrays:
5let unionArray = _.union([1, 2, 3], [3, 4, 5]);
6// unionArray = [1,2,3,4,5]

आप Velo साइडबार के पैकेज सेक्शन में पैकेज का फ़ाइल स्ट्रक्चर देख सकते हैं। साइडबार में पैकेज पर क्लिक करने से उसकी रीडमी कोड पैनल में खुल जाएगी। टॉप 10 npm पैकेज के लिए, पैकेज की रीडमी फ़ाइल के सबसे ऊपर दिए गए निर्देशों से आप जान सकते हैं कि अपनी साइट पर उस पैकेज का इस्तेमाल कैसे करना है।

आप पैकेज की रीडमी फ़ाइल और उससे जुड़ी दूसरी जानकारी को नए ब्राउज़र टैब में npmjs.com पर भी खोल सकते हैं। पैकेज पर होवर करें, और दिखाएं

आइकन पर क्लिक करें और डॉक्यूमेंटेशन देखें चुनें।

पैकेज के उदाहरण

अपनी साइट पर खास npm पैकेज का इस्तेमाल करने का तरीका समझने में आपकी मदद के लिए, हमने Velo उदाहरण पेज पर npm पैकेज इंटीग्रेट करने वाले कुछ उदाहरण जोड़े हैं। आप कोई उदाहरण खोलकर वह कोड देख सकते हैं, जिसे हमने पैकेज के साथ काम करने के लिए जोड़ा है। npm उदाहरण ढूंढने के लिए, उदाहरण पेज के सर्च बार में 'npm' डालें।

पैकेज का वर्ज़न अपडेट करना

पैकेज को उसके लेटेस्ट वर्ज़न पर अपडेट करने के लिए:

पैकेज मैनेजर खोलें और इंस्टॉल्ड पैकेजेस चुनें।
पैकेज पर होवर करें और बटन पर क्लिक करें।
- अगर अपडेट टू vX.X.X का ऑप्शन दिखता है, तो इसका मतलब है कि पैकेज के इंस्टॉल किए गए वर्ज़न से नया कोई सपोर्टेड वर्ज़न उपलब्ध है। पैकेज को बताए गए वर्ज़न पर अपडेट करने के लिए, अपडेट टू vX.X.X पर क्लिक करें।
- अगर रिक्वेस्ट लेटेस्ट वर्ज़न का ऑप्शन दिखता है, तो इंस्टॉल किया गया वर्ज़न ही लेटेस्ट वर्ज़न है या पैकेज के किसी नए वर्ज़न को अभी अप्रूव नहीं किया गया है। रिक्वेस्ट फ़ॉर्म खोलने के लिए, रिक्वेस्ट लेटेस्ट वर्ज़न पर क्लिक करें। रिक्वेस्ट फ़ॉर्म भरें और सबमिट करें। वर्ज़न पहले से भरा होता है और इसे बदला नहीं जा सकता।

ज़रूरी

पैकेज अपडेट अप्लाई करने के बाद, पक्का करें कि आपकी साइट का कोड पैकेज के अपडेट किए गए वर्ज़न के साथ कंपैटिबल है।

पैकेज अनइंस्टॉल करना

पैकेज अनइंस्टॉल करने के लिए:

Velo साइडबार के पैकेजेस (npm) सेक्शन में उस पैकेज पर होवर करें जिसे आप अनइंस्टॉल करना चाहते हैं, और दिखाएं आइकन पर क्लिक करें और अनइंस्टॉल चुनें।
अनइंस्टॉल किया गया पैकेज Velo साइडबार के पैकेजेस (npm) सेक्शन से हटा दिया जाता है।

चेतावनी

पैकेज अनइंस्टॉल करने से उस पर निर्भर कोड काम करना बंद कर सकता है।

पैकेज के लिए रिक्वेस्ट करना

ध्यान दें

आप अप्रूव और रिजेक्ट किए गए npm पैकेजेस की लिस्ट यहाँ देख सकते हैं।

किसी पैकेज को सपोर्टेड पैकेजेस की लिस्ट में जोड़ने की रिक्वेस्ट करने के लिए:

पैकेज मैनेजर का npm सेक्शन खोलें।
जिस पैकेज के लिए आप रिक्वेस्ट करना चाहते हैं, उसे ढूंढने के लिए सर्च बॉक्स का इस्तेमाल करें।
- अगर इंस्टॉल बटन दिखता है, तो पैकेज सपोर्टेड है। इंस्टॉल पर क्लिक करें। इंस्टॉल किया गया पैकेज Velo साइडबार के पैकेजेस (npm) सेक्शन में जुड़ जाता है।
- अगर इंस्टॉल बटन नहीं दिखता है, तो पैकेज को अभी अप्रूव नहीं किया गया है। पैकेज पर होवर करें और और दिखाएं आइकन पर क्लिक करें। रिक्वेस्ट फ़ॉर्म खोलने के लिए, रिक्वेस्ट चुनें। रिक्वेस्ट फ़ॉर्म भरें और सबमिट करें। पक्का करें कि आप ऐसा वर्ज़न डालें जो npm रजिस्ट्री में मौजूद हो।

पैकेज सपोर्ट

रिक्वेस्ट किए गए ज़्यादातर पैकेज अप्रूव हो जाते हैं और आप उन्हें अपने कोड में इस्तेमाल कर सकते हैं। हालांकि, किसी पैकेज के अप्रूव होने के बाद भी यह समझना आपकी ज़िम्मेदारी है कि वह कैसे काम करता है, किन स्थितियों में उसका इस्तेमाल किया जा सकता है और किन स्थितियों में नहीं।

कुछ तरह के पैकेज सपोर्टेड नहीं हैं। इनमें प्राइवेट पैकेजेस, खास हार्डवेयर पर चलने वाले पैकेजेस और सिक्योरिटी रिस्क पैदा कर सकने वाले पैकेजेस शामिल हैं।

अपने कोड में किसी अप्रूव्ड पैकेज का इस्तेमाल करते समय इन बातों का ध्यान रखें:

कुछ पैकेज केवल क्लाइंट-साइड कोड में इस्तेमाल करने के लिए होते हैं, जबकि कुछ केवल सर्वर-साइड कोड के लिए होते हैं। पैकेज का इस्तेमाल उसकी तय की गई लोकेशन पर ही करें।
कुछ पैकेज में ऐसी फंक्शनैलिटी होती है जो DOM के साथ इंटरैक्ट करती है। Velo में, पृष्ठ के एलिमेंट के साथ सीधे DOM के बजाय $w APIs का इस्तेमाल किया जाता है। इसलिए, इन पैकेज की कुछ फंक्शनैलिटी काम नहीं करेगी।
कुछ पैकेज React के साथ काम करते हैं। आप इन पैकेज का इस्तेमाल केवल कस्टम एलिमेंट के साथ कर सकते हैं।
किसी पैकेज की फंक्शनैलिटी का इस्तेमाल करते समय आने वाली गलतियां ब्राउजर कंसोल में दिखाई दे सकती हैं। ये गलतियां पैकेज के इंप्लिमेंटेशन से जनरेट होती हैं, Velo से नहीं। गलती का कारण बेहतर तरीके से समझने के लिए पैकेज के डॉक्यूमेंटेशन को देखें।

परफॉर्मेंस

क्लाइंट-साइड कोड में npm पैकेज इंपोर्ट करने से पृष्ठ का पेलोड बढ़ जाता है और आपकी साइट की परफॉर्मेंस पर बुरा असर पड़ सकता है।

क्या इससे मदद मिली?

इस लेख में

पैकेज इंस्टॉल करना
इंस्टॉल किए गए पैकेज का इस्तेमाल करना
पैकेज के उदाहरण
पैकेज का वर्ज़न अपडेट करना
पैकेज अनइंस्टॉल करना
पैकेज के लिए रिक्वेस्ट करना
पैकेज सपोर्ट
परफॉर्मेंस