Can't load Bootstrap with RequireJS

问题:

I can't seem to figure out how to load Bootstrap via RequireJS. None of the examples that I found worked for me.

Here is my 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

});

and here is how I call Bootstrap:

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

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

The error that I get is this:

Uncaught Error: No define call for bootstrap

Any ideas on how to get this resolved?

回答1:

I found a working example here:

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

I followed it to get my code to work.

According to that demo, especially app.js, you simply make a shim to catch Bootstrap's dependency on jQuery,

requirejs.config({
    // pathsオプションの設定。"module/name": "path"を指定します。拡張子（.js）は指定しません。
    paths: {
        "jquery": "lib/jquery-1.8.3.min",
        "jquery.bootstrap": "lib/bootstrap.min"
    },
    // shimオプションの設定。モジュール間の依存関係を定義します。
    shim: {
        "jquery.bootstrap": {
            // jQueryに依存するのでpathsで設定した"module/name"を指定します。
            deps: ["jquery"]
        }
    }
});

and then mark Bootstrap as a dependency of the app itself, so that it loads before app.js.

// require(["module/name", ...], function(params){ ... });
require(["jquery", "jquery.bootstrap"], function ($) {
    $('#myModalButton').show();
});

Finally, since app.js is the data-main,

<script type="text/javascript" src="./assets/js/require.min.js" data-main="./assets/js/app.js"></script>

Bootstrap's JS is guaranteed to load before any application code.

回答2:

Bootstrap lib does not return any object like jQuery, Underscore or Backbone: this script just modifies the jQuery object with the addition of new methods. So, if you want to use the Bootstrap library, you just have to add in the modules and use the jquery method as usual (without declarating Bootstrap like param, because the value is undefined):

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

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

回答3:

I found it was sufficient to add the following to my requirejs.config call (pseudocode):

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

回答4:

I like to use Require.Js ORDER plugin, what it does? Simply loads all your Libraries in order, in this case you won't get any errors, ohh and bootstrap depends on jQuery, so we need to use shim in this case:

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($) {

});