2012-11-19 26 views
13

में Modernizr है मुझे RequJS और Modernizr के साथ कोई समस्या है।RequJS में Modernizr शामिल करें और हेड टैग

मैं आधुनिकता संसाधन को सिर पर रखना चाहता हूं। और शरीर में सबकुछ। इसका कारण यह है कि मॉडर्निज़र को DOMContentLoad से पहले कुछ सामान करने की आवश्यकता है। मैं RequizS का उपयोग कर मॉड्यूलर मॉड्यूल को अन्य मॉड्यूल में लोड करने में सक्षम होना चाहता हूं। मैं देव और उत्पादन पर्यावरण दोनों को कैसे पूरा कर सकता हूं? मैं requjs का उपयोग करता हूं जो सभी निर्भरताओं को खींचता है और सभी संसाधनों को कम करता है। और यमन निर्माण मिनट के साथ <script data-main="scripts/main" src="scripts/vendor/require.js"></script> बदलता है।

बॉडी टैग के तहत :

<!-- build:js ikl.app.js --> 
<script data-main="scripts/main" src="scripts/vendor/require.js"></script> 
    <!-- endbuild --> 
    <script> 
    requirejs.config({ 

     paths: { 

      'jquery'  : 'vendor/jquery', 
      'handlebars' : 'vendor/handlebars', 
      'ember'   : 'vendor/ember', 
      'ember-data' : 'vendor/ember-data', 
      'modernizr'  : 'vendor/modernizr' // This should be removed 


     }, 

     baseUrl: 'scripts', 


     shim: { 


      'jquery' : { 

       exports : 'jQuery' 

      }, 

      'ember': { 

       deps: ['jquery', 'handlebars'], 
       exports: 'Ember' 

      }, 

      'ember-data': { 

       deps: ['ember'], 
       exports: 'DS' 

      }, 

      'handlebars': { 

       exports: 'Handlebars' 

      }, 

      'modernizr': { 
       exports: 'Modernizr' 
      } 

     } 

    }); 

    require([ 

     'modules/system/controllers/system.controller', 
     'jquery', 
     'ember', 
     'ember-data', 
     'handlebars', 
     'modernizr' 

    ], 
     function(systemController) { 
      systemController.renderView(); 
     } 

    ); 

    </script> 
+4

क्यों न सिर्फ Modernizr तुल्यकालिक सिर में एक स्क्रिप्ट तत्व में लोड को परिभाषित? आप शायद चाहते हैं कि पेज मॉडर्निजर को चलाने के लिए इंतजार कर सके ताकि सभी सीएसएस कक्षाएं मौजूद हों और आपको आश्चर्यजनक रूप से 'स्टाइल कूद' नहीं मिलते क्योंकि विभिन्न सीएसएस वर्ग अचानक आते हैं। –

+0

इसे करने का प्रदर्शन लाभ है शरीर टैग यह एचटीएमएल को तेजी से प्रस्तुत करता है और जेएस तर्क लागू करता है। मैं – einstein

+9

पर जितना संभव हो उतना छोटा जेएस लॉजिक नहीं कर सकता, फ्लैश-ऑफ-अनस्टाइल-कंटेंट एक दृढ़ तर्क है कि HTMLiz को लोड करने से पहले HTML को प्रस्तुत न किया जाए। फिर से विचार करना। –

उत्तर

34

आप दोनों प्राप्त करने के लिए सक्षम होना चाहिए।

  • पहले, अपने पथ विन्यास Modernizr से संबंधित है कि निकालते हैं, तो आप इसे
  • अगला लोड Modernizr सिर में की जरूरत नहीं होगी - यह एक window.Modernizr चर पैदा करेगा।
  • अंत में, पहले अपने बूटस्ट्रैपिंग की आवश्यकता होती है, modernizr मॉड्यूल

    define('modernizr', [], Modernizr); 
    require(['foo', 'bar', 'modernizr'], function(foo, bar, modernizr) { 
        //..profit 
    } 
    
+0

मुझे यह भी कहना चाहिए कि यदि आप अपनी स्क्रिप्ट को अनुकूलित कर रहे हैं तो 'modernizr' को बाहर करना सुनिश्चित करें क्योंकि इसे अनुकूलित बंडलों में पैक करने की आवश्यकता नहीं है। –

+0

कृपया विस्तृत करें? – pilau

+6

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