web-dev-qa-db-fra.com

Impossible de charger Bootstrap avec RequireJS

Je n'arrive pas à comprendre comment charger Bootstrap via RequireJS. Aucun des exemples que j'ai trouvés n'a fonctionné pour moi.

Voici ma cale:

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

});

et voici comment j'appelle Bootstrap:

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

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

L'erreur que j'obtiens est la suivante:

Uncaught Error: No define call for bootstrap

Des idées sur la façon de résoudre ce problème?

javascripttwitter-bootstraprequirejs
22
Teodor Talov

J'ai trouvé un exemple de travail ici:

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

Je l'ai suivi pour faire fonctionner mon code.

Selon cette démo, en particulier app.js , vous faites simplement un shim pour attraper la dépendance de Bootstrap sur 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"]
        }
    }
});

puis marquez Bootstrap en tant que dépendance de l'application elle-même, afin qu'elle se charge avant app.js.

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

Enfin, puisque app.js est le data-main,

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

Le JS de Bootstrap est garanti de se charger avant tout code d'application.

32
Teodor Talov

La bibliothèque d'amorçage ne renvoie aucun objet comme jQuery, Underscore ou Backbone: ce script modifie simplement l'objet jQuery avec l'ajout de nouvelles méthodes. Donc, si vous souhaitez utiliser la bibliothèque Bootstrap, il vous suffit d'ajouter les modules et d'utiliser la méthode jquery comme d'habitude (sans déclarer Bootstrap comme param , car la valeur est undefined):

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

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

J'ai trouvé qu'il suffisait d'ajouter ce qui suit à mon appel requirejs.config (pseudocode):

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

J'aime utiliser Require.Js COMMANDER plugin, que fait-il? Charge simplement toutes vos bibliothèques dans l'ordre, dans ce cas, vous n'obtiendrez aucune erreur, ohh et bootstrap dépend de jQuery, nous devons donc utiliser shim dans ce cas:

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

});
4
Playnox