2015-06-07 18 views
6

Sono necessari js che funzionano correttamente senza i bundle. Ma ogni volta che uso un pacchetto, ottengo dei timeout per i moduli che sto cercando di importare.RequireJS timeout del caricamento del modulo quando si utilizzano i bundle

ecco come lo costruisco i fasci con Bundler mvc asp.net/minifier

bundles.Add(new ScriptBundle("~/bundles/test").Include(
      "~/scripts/jquery-{version}.js", 
      "~/scripts/bootstrap.js", 
      "~/scripts/moment.js")); 

bundles.EnableOptimizations = true; 

Heres è il bisogno js configurazione nel file cshtml:

<script> 
    require.config({ 
     baseUrl: "/scripts", 
     paths: { 
      jquery: "jquery-1.11.2" 
     }, 
     waitSeconds: 20, 
     shim: { 
      bootstrap: { 
       deps: ['jquery'] 
      } 
     }, 
     bundles: { 
      '@Scripts.Url("~/bundles/test").ToString()': [ 
       'jquery', 
       'bootstrap', 
       'moment' 
      ] 
     } 
    }); 
    require(["app/main/test"]); 
</script> 

E i js per la pagina (APP/main/test):

require(['jquery', 'moment'], function ($, moment) { 
    console.log(moment().format()); 
}); 

Jquery, bootstrap e momento biblioteche sono nel pacchetto di test che ho cre dato che ottengo dei timeout di caricamento che caricano la pagina per un momento.

Ecco l'errore ispettore Chrome:

load timeout

Tutte le idee?

grazie in anticipo.

risposta

0

Ciò accade perché non si richiede affatto il pacchetto. La tua richiesta richiede solo jquery e momento. Hai fornito il percorso del file jquery, quindi requirejs utilizza quel percorso per scaricare e fornire il modulo jquery. Ma dal momento che non esiste una definizione di percorso per momento, è solo una parte del pacchetto che hai creato. Quindi requirejs prova a scaricare momento dal suo nome modulo come percorso e genera quindi un errore.

Una semplice soluzione per questo è richiedere il pacchetto stesso.

require(['@Scripts.Url("~/bundles/test").ToString()'], function(bundle){ 
    //At this point jquery, moment and bootstrap will be loaded. 
}); 

È possibile scegliere di utilizzare jQuery, momento a partire dal namespace globale nell'esempio precedente, direttamente o si può provare che richiede loro separatamente in seguito esempio. Non sono sicuro, ma potresti avere errori con l'esempio sottostante a causa della dipendenza ciclica.

require(['@Scripts.Url("~/bundles/test").ToString()', 'jquery', 'moment'], function(bundle, $, moment){ 
     //At this point jquery, moment and bootstrap will be loaded. 
    }); 
0

Basta togliere 'jquery' dai vostri pacchi

bundles.Add(new ScriptBundle("~/bundles/test").Include(
     "~/scripts/bootstrap.js", 
     "~/scripts/moment.js")); 
... 
bundles: { 
    '@Scripts.Url("~/bundles/test").ToString()': [ 
     'bootstrap', 
     'moment' 
    ] 
} 
... 

hai già specificato nei percorsi

paths: { 
    jquery: "jquery-1.11.2" 
}, 

Pare s require.js esegue il mapping dei moduli ai pacchetti in modo che, una volta caricato un modulo che fa parte di un pacchetto, tale pacchetto non venga nuovamente caricato.

Problemi correlati