22

我似乎无法弄清楚如何通过 RequireJS 加载 Bootstrap。我发现的所有例子都不适合我。

这是我的垫片：

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

});

这就是我如何称呼 Bootstrap：

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

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

我得到的错误是这样的：

Uncaught Error: No define call for bootstrap

关于如何解决这个问题的任何想法？

4

4 回答 4

33

我在这里找到了一个工作示例：

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

我跟着它让我的代码工作。

根据该演示，尤其是app.js，您只需制作一个 shim 即可捕获 Bootstrap 对 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"]
        }
    }
});

然后将 Bootstrap 标记为应用程序本身的依赖项，以便它在app.js.

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

最后，因为app.js是数据主体，

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

Bootstrap 的 JS 保证在任何应用程序代码之前加载。

于 2013-05-13T05:13:41.800 回答
12

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
});
于 2013-04-29T01:07:50.087 回答
8

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

requirejs.config({
  ...
  shim: {
    'bootstrap': {
      deps: ['jquery']
    }
  }
});
于 2014-04-04T14:36:29.980 回答
3

我喜欢使用 Require.Js ORDER插件，它有什么作用？只需按顺序加载所有库，在这种情况下您不会收到任何错误，哦，并且引导程序依赖于jQuery，因此在这种情况下我们需要使用shim：

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

});
于 2014-05-04T16:48:22.347 回答