Includere Modernizr in RequireJS e avere il Modernizr nei tag head

Ho un problema con RequireJS e Modernizr.Includere Modernizr in RequireJS e avere il Modernizr nei tag head

Voglio che la risorsa Modernizr sia sulla testa. E tutto il resto nel corpo. La ragione è che Modernizr ha bisogno di fare qualcosa prima di DOMContentLoad. Voglio essere in grado di caricare il modulo Modernizr in altri moduli usando RequireJS. Come posso realizzare ciò sia in ambiente di sviluppo che di produzione? Io uso requirejs che estrae tutte le dipendenze e minimizza tutte le risorse. E la versione yeoman sostituisce <script data-main="scripts/main" src="scripts/vendor/require.js"></script> con la versione minificata.

sotto il tag body:

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

fonte

2012-11-19 einstein

Perché non basta caricare Modernizr sincrono in un elemento script nella testa? Probabilmente vorrai che la pagina attenda che Modernizr sia in esecuzione in modo che tutte le classi CSS siano presenti e non si ottengano "salti di stile" sgradevoli con l'improvvisa comparsa di varie classi di css. –

C'è un guadagno in termini di prestazioni di averlo su il tag del corpo. Rende l'HTML più veloce e applica la logica JS. Non voglio il meno possibile JS logics on the head – einstein

flash-of-unstyled-content è un argomento di convinzione che non esegue il rendering dell'HTML prima che lo stesso Modernizr venga caricato. Pensa di nuovo. –

Si dovrebbe essere in grado di ottenere entrambe le cose.

primo luogo, rimuovere la configurazione di percorsi che si riferisce a Modernizr, non avrete bisogno che
successiva carico Modernizr nella testa - questo creerà una variabile window.Modernizr.

Infine, prima del vostro bootstrap richiede, definire il modulo Modernizr

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

fonte

2013-05-08 17:12:37

Devo anche dire che, se stai ottimizzando gli script, assicurati di escludere 'modernizr' in quanto non ha bisogno di essere impacchettato nei bundle ottimizzati. –

Si prega di elaborare? – pilau

L'ottimizzatore richiesto inizia da un file e percorre l'albero delle dipendenze raggruppando insieme tutto in un singolo file ottimizzato (e facoltativamente ridotto). Questa è una fase di build consigliata prima di spingere alla distribuzione per ridurre al minimo quantità e quantità di richieste. Quando l'ottimizzatore vede ''modernizr'' non ha modo di sapere che questo è fornito esternamente dalla pagina, assume il suo in un file come tutti gli altri ed errori quando questo non può essere trovato (questo è corretto e quello che vuoi) . La soluzione è usare la proprietà ''exclude'' nella configurazione dell'ottimizzatore per dirgli di non preoccuparsi di'' modernizr''. –

Includere Modernizr in RequireJS e avere il Modernizr nei tag head

risposta

Problemi correlati