RequireJS Modul laden Timeout bei der Verwendung von Bundles

Question

Haben erfordern, dass js gut ohne die Bundles funktioniert. Aber immer, wenn ich ein Bundle verwende, bekomme ich Timeouts für die Module, die ich importieren möchte.

Hier ist, wie ich das Bündel mit dem asp.net Mvc bundler bauen/minifier

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

bundles.EnableOptimizations = true; 

Heres ist das erfordern js config in der cshtml Datei:

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

Und die js für die Seite (app/main/Test):

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

JQuery, Bootstrap und Moment Bibliotheken im Testbündel sind i cre haben Ated, aber ich bekomme Lade-Timeouts, die die Seite für einen Moment laden.

Hier ist der Chrom Inspektor Fehler:

Irgendwelche Ideen?

danke im voraus.

Answer 1

Dies passiert, weil Sie Ihr Bündel überhaupt nicht benötigen. Ihr Require-Anruf hat nur jquery und Moment. Sie haben den Pfad für die jquery-Datei angegeben, sodass requirejs diesen Pfad zum Herunterladen und Bereitstellen des jquery-Moduls verwendet. Aber da es für den Moment keine Pfaddefinition gibt, ist es nur ein Teil des von Ihnen erstellten Bündels. Also requirejs versucht den Moment mit seinem Modulnamen als Pfad herunterzuladen und löst somit einen Fehler aus.

Eine einfache Lösung dafür ist, das Paket selbst zu benötigen.

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

Sie können wählen, direkt jQuery, Moment von den globalen Namensraum in obigem Beispiel verwenden, oder Sie können versuchen, sie einzeln in folgendem Beispiel erfordern. Ich bin mir nicht sicher, aber Sie können wegen der zyklischen Abhängigkeit mit dem folgenden Beispiel in Fehler geraten.

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

Answer 2

Entfernen Sie einfach 'jquery' aus dem Bündel

bundles.Add(new ScriptBundle("~/bundles/test").Include(
     "~/scripts/bootstrap.js", 
     "~/scripts/moment.js")); 

... 
bundles: { 
    '@Scripts.Url("~/bundles/test").ToString()': [ 
     'bootstrap', 
     'moment' 
    ] 
} 
... 

Sie es bereits in den Pfaden

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

---

Es angegeben haben scheinen s require.js ordnet die Module Bündeln zu, sodass nach dem Laden eines Moduls, das Teil eines Pakets ist, dieses Paket nicht erneut geladen wird.