निर्भरताओं के साथ जावास्क्रिप्ट फ़ाइलों को संयोजित करने और उन्हें मॉड्यूल के रूप में आउटपुट करने का सबसे अच्छा तरीका?

Question

मुझे पता है कि यह प्रश्न अक्सर समान भिन्नताओं में आया है, लेकिन कोई समाधान मेरी आवश्यकताओं को पूरी तरह फिट करने के लिए प्रतीत नहीं होता है। मेरे पास निम्न समस्या है:

विकास में मैं एकाधिक जेएस फाइलों (प्रत्येक फ़ाइल "ऑब्जेक्ट") का उपयोग करता हूं। इन जेएस फाइलों में एक दूसरे के भीतर कई निर्भरताएं हैं - कुछ दूसरों पर भरोसा करते हैं और मुझे उन्हें पहले लोड करना होगा। वर्तमान में मैं प्रत्येक जेएस फ़ाइल को सही क्रम में लोड करने के लिए RequJS का उपयोग करता हूं, इसलिए मैं प्रत्येक फ़ाइल के लिए एक मॉड्यूल परिभाषित करता हूं। ठीक है और बांका। लेकिन अब मैं अपनी सभी जेएस फ़ाइलों को एक बड़ी जेएस फ़ाइल में जोड़ना चाहता हूं जो मॉड्यूल स्वयं होना चाहिए। मैं ऐसा करने के लिए RequJS अनुकूलक r.js का उपयोग करता हूं। मेरी समस्या: प्रत्येक जेएस फ़ाइल एक बड़ी जेएस फ़ाइल से जुड़ा हुआ है, लेकिन प्रत्येक ऑब्जेक्ट के लिए मॉड्यूल परिभाषा को शामिल किया गया है। मेरे पास एक बड़ी फाइल में एक बड़ा मॉड्यूल नहीं है, लेकिन एक बड़ी फाइल में कई मॉड्यूल हैं।

इसके बाद मैंने संगतता के लिए कड़वाहट की कोशिश की जो ठीक काम करता है, लेकिन फ़ाइलों की निर्भरताओं को अनदेखा करता है। यह सिर्फ प्रत्येक फ़ाइल को वर्णानुक्रम में संगत करता है या मुझे अपने gruntfile में ऑर्डर को हार्डकोड करना होगा।

मैं इसे कैसे हल कर सकता हूं?

बस मेरी समस्या का एक उदाहरण के रूप में

: मैं फ़ाइलें निम्न है (छद्म कोड):

FileA 
- define FileA module 
- depends on FileB 
- FileA Logic 

FileB 
- define FileB module 
- FileB Logic 

और मैं इस उत्पादन हैं:

LibFile 
- define LibFile module 
- FileB Logic, FileA Logic 

लेकिन मैं r.js के साथ इस मिल (फाइलए और फाइलबी से मॉड्यूल परिभाषा की प्रतिलिपि बनाई गई है):

LibFile 
- define FileB module 
- FileB Logic 
- define FileA module 
- depends on FileB 
- FileA Logic 

और मुझे यह डब्ल्यू मिलता है ith घुरघुराना (गलत क्रम):

LibFile 
- FileA Logic 
- FileB Logic 

हो सकता है कि सवाल थोड़ा बेवकूफ है, लेकिन मैं सिर्फ उपकरण हर कोई उपयोग करने के लिए लगता है के साथ इस का समाधान नहीं कर सकते हैं ... मैं घुरघुराना-requirejs प्लगइन की कोशिश की, भी। लेकिन यह कई त्रुटियों को फेंकता है जो मैं हल नहीं कर सका।

धन्यवाद, Pipo

Answer 1

मैं इसे एक जवाब में स्थानांतरित करने के लिए जा रहा हूँ। बस इतना कोड थोड़ा स्पष्ट है।

मैं इसे स्मृति द्वारा कर रहा हूं (क्योंकि मैं अभी इसका परीक्षण नहीं कर सकता) इसलिए कुछ छोटी चीजें पूरी तरह सटीक नहीं हो सकती हैं।

यह कैसे आप अपने मॉड्यूल पैकेज पर निश्चित रूप से निर्भर करता है, लेकिन एक तरह से एक बड़ा मॉड्यूल में अपने सभी छोटे मॉड्यूल रजिस्टर करने के लिए है: फ़ाइल B.js

फ़ाइल A.js

define([], function() { 
    // do something 
    return A; 
}); 

define(['path/to/A'], function(A){ 
    // do something with A and more 
    return B; 
}); 

उसके बाद, आप उन्हें एक साथ पैकेज:

फ़ाइल mylib।js

define(['path/to/A', 'path/to/B'], function(A, B){ 
    return { 
     A : A, 
     B : B 
    } 
} 

आप तो mylib.js को अपने निर्माण प्रोफ़ाइल इंगित कर सकते हैं और यह एक बड़ी फ़ाइल में संयोजित हो जाएंगे। यह एक सर्व-encapsulating मॉड्यूल नहीं होगा, लेकिन इसमें एक प्रविष्टि मॉड्यूल होगा जो बाकी सब कुछ संदर्भित करता है। फिर आप इतने की तरह उपयोग कर सकते हैं:

require.config({ 
    paths : { 
     'path/to/mylib' : 'real/path/to/mylib/on/server' 
    } 
}); 
require(['path/to/mylib'], function(Lib) { 
    // do something using Lib.A or Lib.B 
} 

एक बात ध्यान देने के लिए करने के लिए अपने बड़े मॉड्यूल फ़ाइल की आईडी है। डिफ़ॉल्ट रूप से RequJS बिल्ड आईडी को देता है जो भौतिक पथ से मेल खाता है (appDir आईआईआरसी से) और आप को अपनी निर्भरता लोड करते समय मेल खाना पड़ेगा। सीधे शब्दों में कहें, अपने जिसके परिणामस्वरूप अगर mylib.js फ़ाइल एक मुख्य मॉड्यूल नाम 'path/to/mylib' प्राप्त है, तो आपको यह मेल खाते हैं और एक ही आईडी (require.config.paths का प्रयोग करके) द्वारा इसे लोड या नक्शे और इस तरह के (जिनमें से कुछ RequireJS की आवश्यकता है साथ खेलने के लिए होगा 2.0)।

निम्न कारणों से मैं तुम्हें पूछा क्यों आप "बड़े मॉड्यूल" बात करना चाहता हूँ होगा

ध्यान देने के अन्य बात यह है कि अपने सभी भीतरी छोटे मॉड्यूल भी अपने भौतिक पथ मिलान आईडी प्राप्त है और आप इन आईडी जब आप बड़े पैकेज मॉड्यूल (ताकि आप उन्हें न केवल Lib.A के माध्यम से उपयोग कर सकते हैं) का उपयोग करता है, तो mylib.js लोड किया गया है का उपयोग कर सकते हैं: एक फ़ाइल में

require(['path/to/A'], function(A) { 
    // do something using A 
}