एकल फ़ाइल

Question

में concatenate requjs मॉड्यूल को एक ही संगत और uglified main.min.js में मेरे सभी आवश्यक मॉड्यूल और कुछ टेक्स्ट टेम्पलेट्स को संयोजित करने का प्रयास कर रहा हूं, इसलिए मैं उस फ़ाइल को अपने HTML में शामिल कर सकता हूं।

मैंने समेकन और उलझन में हिस्सा निकाला। हालांकि, मैं वास्तव में ब्राउज़र में किसी भी कोड को चलाने में सक्षम नहीं हूं।

मैंने समस्या को पुन: उत्पन्न करने के लिए bare-bone project on github बनाया है।

फ़ाइल संरचना:

• main.js
• index.html
• log.js
• निर्माण उत्पादन
• lib/require.js
• node_modules/आवश्यकता/bin /r.js

./node_modules/requirejs/bin/r.js -o build-production.js 

main.js

निर्माण production.js:

({ 
    mainConfigFile : 'main.js', 
    include : [ 'requireLib' ], 
    name : 'main.js', 
    out : 'main.min.js' }) 

मैं main.js, log.js और require.js निर्माण फ़ाइल निर्माण उत्पादन का उपयोग कर जोड़

index.html:

<script src="main.min.js" type="text/javascript"></script> 

तो सूचकांक एक ब्राउज़र में .html प्रिंट चाहिए बाहर

लोड हो रहा है main.js
लोड मुख्य

भरी हुई लेकिन यह केवल बाहर पहली पंक्ति

लोड हो रहा है main.js

प्रिंट

कोई जानता है, ऐसा क्यों है?

Answer 1

मैंने अभी आपके कोड पर नजदीकी नजर डाली है।

मुझे यकीन है कि तुम क्यों का उपयोग कर minified फ़ाइल में लोड कर रहे हैं नहीं कर रहा हूँ:

<script src="main.min.js" type="text/javascript"></script> 

यह अभी भी एक AMD मॉड्यूल है, इसलिए एक एएमडी लोडर का उपयोग करने में लोड करने की आवश्यकता (अन्यथा define नहीं है संभाला जाओ)।

यह काम करता है:

<script type="text/javascript" src="lib/require/require.js"></script> 
<script type="text/javascript"> 
    require(['main.min'], function() { 
     require(['main'], function() {}); 
    }); 
</script> 

संपादित करें: जबकि बाहरी minified फ़ाइल (सभी मॉड्यूल से युक्त), आप भी, एक दूसरे की जरूरत है नेस्ट में लोड की आवश्यकता होती है वास्तविक मॉड्यूल अभी भी रूप में जाना जाता लोड करने के लिए आवश्यकता होती है मुख्य।

यह काफी भ्रामक एक एकल मॉड्यूल मुख्य नामित और फिर main.min नामित सभी मॉड्यूल की एक minified संस्करण होने है। उदाहरण के लिए, मैं मुख्य की अपेक्षा कर सकता हूं कि main.min जैसा बिल्कुल ठीक हो, लेकिन बिना किसी ऑप्टिमाइज़ेशन के।

• प्रवेश बिंदु:: MyApp
• संकलित (optimize: 'none'): मुख्य
• संकलित (optimize: 'uglify2'): main.min

आप की तरह कुछ करने के लिए नाम बदलने पर विचार कर सकते

अपनी बिल्ड फ़ाइल में 2: संपादित करें:

name: 'main.js' → name: 'main'

requirejs कर देगा कि मॉड्यूल मुख्य बजाय नाम: स्थानीय में require(['main']) पाता (और लोड) मॉड्यूल नामित मुख्य:

define('main.js', ...); → define('main', ...);

अब संकलित फ़ाइल का दायरा।

से पहले: require(['main']) नाम के एक मॉड्यूल नहीं मिला मुख्य (यह main.js नामित किया गया था) तो एक फ़ाइल नाम और भार ./main.js के रूप में व्यवहार करता है।

संपादित करें 3: वैकल्पिक रूप से संपादित 2 करने के लिए, अपने निर्माण फाइल में आप को बनाए रखने सकता है:

name: 'main.js'

और या तो निर्माण config या चलाने के समय config करने के लिए एक रास्ता उपनाम जोड़ना:

paths: { 'main' : 'main.js' }

(यह यादृच्छिक सोचा कोई वारंटी के साथ आता है।)