web-dev-qa-db-ja.com

ロードできませんBootstrap RequireJSで

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

});

そして、これが私がブートストラップを呼び出す方法です：

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

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

私が得るエラーはこれです：

Uncaught Error: No define call for bootstrap

これを解決する方法についてのアイデアはありますか？

javascripttwitter-bootstraprequirejs
22
Teodor Talov

私はここで実際の例を見つけました：

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

コードを機能させるためにそれに従いました。

そのデモ、特に app.js によると、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は、アプリケーションコードの前にロードされることが保証されています。

32
Teodor Talov

Bootstrap libはjQuery、Underscore、Backboneなどのオブジェクトを返しません。このスクリプトは、新しいメソッドを追加してjQueryオブジェクトを変更するだけです。したがって、Bootstrapライブラリを使用する場合は、モジュールを追加し、通常どおりjqueryメソッドを使用する必要があります（Bootstrap 、値が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

Requirejs.config呼び出し（擬似コード）に次を追加するだけで十分であることがわかりました。

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

Require.Js[〜＃〜] order [〜＃〜]プラグインを使用したいのですが、それは何をしますか？すべてのライブラリを順番にロードするだけです。この場合、エラーは発生しません。ohhおよびbootstrapは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($) {

});
4
Playnox