2012-11-19 21 views
13

RequireJS ve Modernizr ile ilgili bir sorunum var.Modernizr'i RequireJS'ye dahil edin ve Modernizr'i baş harflerle belirtin

Modernizr kaynağının başının üzerinde olmasını istiyorum. Ve vücuttaki diğer her şey. Bunun nedeni, Modernizr'ın DOMContentLoad'dan önce bazı şeyler yapması gerektiğidir. Modernizr modülünü RequireJS kullanarak diğer modüllere yükleyebilmek istiyorum. Hem geliştirme hem de üretim ortamında bunu nasıl başarabilirim? Tüm bağımlılıkları çeken ve tüm kaynakları küçümseyen talepler kullanıyorum. Ve yeoman derlemesi, <script data-main="scripts/main" src="scripts/vendor/require.js"></script>'un değiştirilmiş sürümü ile değiştirir. gövde etiketinin altında

:

<!-- 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

Neden sadece kafasında bir senaryo elemanda eşzamanlı Modernizr yüklemek modernizr modülü tanımlamak? Büyük olasılıkla sayfanın Modernizr'ın çalışmasını beklemesini istersiniz, böylece tüm CSS sınıfları vb. Mevcut olur ve çeşitli css sınıfları gibi aniden tekmelenerek 'stil atlamaları' elde edemezsiniz. –

+0

Bir performans artışı kazanırsınız. vücut etiketi. HTML'yi daha hızlı hale getirir ve JS mantığını uygular. – einstein

+9

flash-of-unstyled-içerikte mümkün olan en az JS mantığı, Modernizr'in kendisi yüklenmeden önce HTML'yi oluşturmamaya yönelik inandırıcı bir argüman değildir. Tekrar düşün. –

cevap

34

Her iki almak gerekir.

  • Birincisi, modernizr ilgilidir yollarınız yapılandırmasını kaldırabilir kafalarından o
  • Sonraki Yük Modernizr gerekmez - bu window.Modernizr değişkeni yaratacaktır. sizin önyükleme gerektiren önce
  • Son olarak,

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

Ayrıca, komut dosyalarınızı optimize ediyorsanız, optimize edilmiş paketlerde paketlenmesine gerek duymadığından 'modernizr'i hariç tutmayı ihmal etmeyin. –

+0

Lütfen detaylandırın? – pilau

+6

Gereksinim Optimize Edici bir dosyada başlar ve bağımlılık ağacını her şeyi tek bir optimize edilmiş (ve isteğe bağlı olarak küçültülmüş) bir dosyada bir araya getirir. Bu, istek miktarını ve boyutunu en aza indirmek için dağıtıma geçmeden önce önerilen bir kurulum adımıdır. Optimize edici '' modernizr '' i gördüğünde, bunun sayfa tarafından harici olarak sağlandığını bilmenin bir yolu yoktur, bu, bulunamadığında diğerlerine ve hatalara benzer bir dosyada olduğunu varsayar (bu doğru ve ne istediğinizi). . Çözüm, '' modernizr '' hakkında endişelenmemesi için '' exclude '' özelliğini optimizer yapılandırmanızda kullanmaktır. –