क्लाइंट-साइड जावास्क्रिप्ट लाइब्रेरी को आज संशोधित और पैकेज कैसे करें?


11

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

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

या शायद यह मेरे संदर्भ के लिए, मेरे पुस्तकालय के कई संस्करणों को उत्पन्न करने के लिए सबसे साफ है?

मैं पैकेजिंग और प्रकाशन के बारे में भी सोच रहा हूं। कई प्रणालियां हैं, लेकिन मेरा मानना ​​है कि प्रमुख एक है बोवर, जो कि सभी के साथ सौदा करना आसान है क्योंकि यह प्राप्त होता है। हालाँकि, मुझे आश्चर्य हो रहा है कि क्या मुझे अन्य पैकेज सिस्टम जैसे घटक (जिसमें कॉमनजेएस की आवश्यकता है) को भी लक्षित किया जाना चाहिए।

क्या अन्य प्रासंगिक पहलू हैं जिनसे मुझे अवगत होना चाहिए? क्या इस सब के लिए कोई अच्छी उदाहरण परियोजनाएं हैं?


यह एक भयानक ट्यूटोरियल है: youtube.com/watch?v=USk1ie30z5k लड़के में रिक्जेस्ट (r.js), नोड, बोवर, बैकबोन का उल्लेख है ...

@MattFenwick मैंने सभी उल्लिखित टूल का उपयोग किया है; वीडियो मेरे किसी भी प्रश्न का उत्तर नहीं देता है।
यांग

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

जवाबों:


2

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

Browserify के साथ आप कुछ ऐसा कर सकते हैं (नाम दिया गया app.js):

var MyLib = require('../myLib');

if(typeof window !== 'undefined') {
    window.MyLib = MyLib;
    window._ = require('underscore');
    window.$ = require('$');
    window.MyLib.myCan = require('./3rdParty/can/can');
}

app.js> client.js ब्राउज करें

कुछ इस तरह का उत्पादन होगा:

[function(require,module,exports){
    window.MyLib = //MyLib code
},
function(require,module,exports){
     window._ = //_ code
},
function(require,module,exports){
    window.$ = //$ code
},
function(require,module,exports){
    window.MyLib.myCan = //can code
}

जिस फ़ाइल को आप परिभाषित करेंगे, उसमें आपकी सभी 3 जी पार्टी लिबास शामिल हो सकती हैं और आपके किसी भी डेवलपर्स के साथ इसका उपयोग नहीं होगा।

- टिप्पणी के जवाब में संपादित करें (और सवाल पर एक पूरी याद आती है)

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


+1 ब्राउज़र के लिए, अधिक लोगों को उस उपकरण के बारे में जानने की आवश्यकता है
बेंजामिन ग्रुएनबाम

@BenjaminGruenbaum यह एक बहुत अच्छा उपकरण है। मैं बहुत भाग्यशाली हूं कि मैंने इसे फिर से जांचा। मैंने शुरू में इसे अनदेखा कर दिया क्योंकि इससे फाइल को async लोड करने में उपयोग किया जाता था जो कि ब्राउज़र में फाइल लोड के N # को ट्रिगर कर सकता था। अब केवल एक और स्रोत मानचित्र सक्षम हो सकते हैं।
pllee

1
देखें, यहाँ समस्या है - मैं एक पुस्तकालय प्रकाशित करने के बारे में पूछ रहा हूँ। मैं वास्तव में ब्राउज़राइज़ / वनज / अन्य कॉमनजेस-आधारित सिस्टम के बारे में जानता हूं, लेकिन अगर मैं require()अपने कोड में उपयोग करना शुरू कर देता हूं, तो इसका मतलब है कि यह अब उपयोगकर्ताओं के लिए सुलभ नहीं होगा जब तक कि वे कॉमनज का उपयोग करने के लिए अपने स्वयं के प्रोजेक्ट नहीं बदलते। यदि मैं एक संकलित स्क्रिप्ट जारी करता हूं, तो इसमें संभावित रूप से अपनी परियोजना के साथ निर्भरता शामिल होगी और संभावित रूप से डिलीवर करने योग्य (जैसे कई jquery) ब्लोट करें।
यांग

0

क्लाइंट-साइड लाइब्रेरी के प्रकार:

  1. डोम को छूता है
  2. DOM को स्पर्श नहीं करता है

पहली तरह (UI विजेट्स) के साथ, आप आमतौर पर मानेंगे कि jQuery मौजूद है। आप "DOM पुस्तकालय अज्ञेयवादी" भी लिख सकते हैं और यह कम लोकप्रिय लोगों के साथ भी काम करता है लेकिन मैं परेशान नहीं करता।

दूसरे तरह के साथ। सबसे पहले, इसे एक jQuery प्लगइन न बनाएं, उदाहरण के लिए "jQuery कुकी प्लगइन" हास्यास्पद है, लेकिन ऐसी लाइब्रेरी वास्तव में मौजूद है।

इन दोनों प्रकारों में कोई निर्भरता नहीं हो सकती है, छोटी निर्भरता या विशाल निर्भरता - इस अर्थ में एक निर्भर पुस्तकालय के रूप में गिनती नहीं होती है। पहले 2 के साथ, आप उन्हें अपने पुस्तकालय के दायरे में सम्‍मिलित करेंगे और संभावित दोहराव की चिंता नहीं करेंगे। उदाहरण के लिए, jQuery एक आंतरिक isArrayLikeफ़ंक्शन को बदलता है , भले ही उपयोगकर्ता के पास कुछ यादृच्छिक उपयोगिता बेल्ट लाइब्रेरी से पहले से ही शामिल हो।

मेरे पास केवल एक निजी अनुभव है जब एक पुस्तकालय (वास्तव में एक भाषा) का विकास हो रहा है moment.js। इस मामले में, मैं 2 बिल्ड प्रदान करूंगा, एक पल के साथ। जेएस संक्षिप्त और एक बिना, जहां उपयोगकर्ता इसके लिए जिम्मेदार है। मैं नहीं जानता कि क्या यह एक अच्छा समाधान है।

और हाँ, हर मामले में, एक अंतिम बड़ी फ़ाइल के निर्माण के लिए jQuery का दृष्टिकोण जो बस काम करता है। इसमें नीचे की तरफ मॉड्यूल बॉयलरप्लेट (आवश्यकता / एएमडी / वैश्विक आदि का पता लगाने) है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.