Bootstrap kann nicht mit RequireJS geladen werden

Question

Ich kann nicht herausfinden, wie man Bootstrap über RequireJS lädt. Keines der Beispiele, die ich fand, funktionierte für mich.

Hier ist meine Shim:

require.config({ 
    // Sets the js folder as the base directory for all future relative paths 
    baseUrl: "./js", 
    urlArgs: "bust=" + (new Date()).getTime(), 
    waitSeconds: 200, 
    // 3rd party script alias names (Easier to type "jquery" than "libss/jquery, etc") 
    // probably a good idea to keep version numbers in the file names for updates checking 
    paths: { 

     // Core libsraries 
     // -------------- 
     "jquery": "libs/jquery", 
     "underscore": "libs/lodash", 
     "backbone": "libs/backbone", 
     "marionette": "libs/backbone.marionette", 

     // Plugins 
     // ------- 
     "bootstrap": "libs/plugins/bootstrap", 
     "text": "libs/plugins/text", 
     "responsiveSlides": "libs/plugins/responsiveslides.min", 
     'googlemaps': 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDdqRFLz6trV6FkyjTuEm2k-Q2-MjZOByM&sensor=false', 


     // Application Folders 
     // ------------------- 
     "collections": "app/collections", 
     "models": "app/models", 
     "routers": "app/routers", 
     "templates": "app/templates", 
     "views": "app/views", 
     "layouts": "app/layouts", 
     "configs": "app/config" 

    }, 

    // Sets the configuration for your third party scripts that are not AMD compatible 
    shim: { 

     "responsiveSlides": ["jquery"], 
     "bootstrap": ["jquery"], 
     "backbone": { 

     // Depends on underscore/lodash and jQuery 
     "deps": ["underscore", "jquery"], 

     // Exports the global window.Backbone object 
     "exports": "Backbone" 

     }, 
     "marionette": { 
     // Depends on underscore/lodash and jQuery 
     "deps": ["backbone", "underscore", "jquery"], 
     // Exports the global window.Backbone object 
     "exports": "Marionette" 
     }, 
     'googlemaps': { 'exports': 'GoogleMaps' }, 
     // Backbone.validateAll plugin that depends on Backbone 
     "backbone.validate": ["backbone"] 

    }, 
    enforceDefine: true 

}); 

und hier ist, wie ich Bootstrap nennen:

define([ 
     "jquery", 
     "underscore", 
     "backbone", 
     "marionette", 

     "collections/Navigations", 
     'bootstrap', 
     ], 
function($, _, Backbone, Marionette, Navigations, Bootstrap){ 

Der Fehler, die ich bekomme, ist dies:

Uncaught Error: No define call for bootstrap 

Alle Ideen, wie um das gelöst zu bekommen?

Answer 1

ich gefunden Arbeitsbeispiel hier:

https://github.com/sudo-cm/requirejs-bootstrap-demo

folgte ich es meinen Code zu arbeiten.

Answer 2

Die Bootstrap-Bibliothek gibt kein Objekt wie jQuery, Underscore oder Backbone zurück: Dieses Skript ändert nur das jQuery-Objekt durch Hinzufügen neuer Methoden. Also, wenn Sie die Bootstrap-Bibliothek verwenden möchten, müssen Sie nur noch in den Modulen hinzufügen und die jquery Methode wie gewohnt verwenden (ohne Bootstrap wie param declarating, weil der Wert undefined ist):

define([ 
    "jquery", 
    "underscore", 
    "backbone", 
    "marionette", 
    "collections/Navigations", 
    "bootstrap", 
    ], 

function($,_,Backbone,Marionette,Navigations){ 
    $("#blabla").modal("show"); //Show a modal using Bootstrap, for instance 
}); 

Answer 3

Ich fand es ausreichend war, folgendes zu meinem requirejs.config Anruf (Pseudo-Code) hinzufügen:

requirejs.config({ 
    ... 
    shim: { 
    'bootstrap': { 
     deps: ['jquery'] 
    } 
    } 
}); 

Answer 4

I Require.Js ORDER Plugin, was es tut, verwenden? Einfach lädt alle Bibliotheken, um in diesem Fall, dass Sie keine Fehler erhalten wird, ohh und Bootstrap hängt von jQuery, so müssen wir Shim in diesem Fall verwenden:

requirejs.config({ 
    baseUrl: "./assets", 
    paths: { 
     order: '//requirejs.org/docs/release/1.0.5/minified/order', 
     jquery: 'http://code.jquery.com/jquery-2.1.0.min', 
     bootstrap: '//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min' 
    }, 
    shim: { 
     'bootstrap': { 
      deps:['jquery'] 
     } 
    } 
}); 

require(['order!jquery', 'order!bootstrap'], function($) { 

});