2016-05-29 25 views
0

私のアプリをrequire.jsを使用するように変換中ですが、ブートストラップをロードできないようです。これは、(以下はなしサブディレクトリで、シンプルなフラットなディレクトリ構造を前提として)私がやっているの輪郭である:RequireJS - ブートストラップを読み込めません

main.js

requirejs.config({ 
    paths: { 
    "jquery": "jquery-1.12.4.min", 
    "bootstrap" : "bootstrap.min" 
    }, 
    shim: { 
    "bootstrap": { 
     deps: ["jquery"] 
    } 
    } 
}); 

require(["jquery"], function($) { 
    console.log($.fn); 
}); 

index.htmlを

<html> 
    <head> 
     <title>RequireJS Test</title> 
     <link rel="stylesheet" type="text/css" href="./bootstrap.min.css"> 
    </head> 
    <body> 
     <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">File</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Open...</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Save</a></li> 
        <li><a href="#">Save As...</a></li> 
       </ul> 
      </li> 
     </ul> 
     </div> 
    </body> 
    <script data-main="./main" src="./require.js"></script> 
</html> 

私のブートストラップのnavbarのドロップダウンは機能しません。コンソールのjQueryオブジェクト自体を調べると、bootstrap.min.jsには何も付いていません。しかし、私は何が間違っているのか分かりません。私の本当のアプリもバックボーンを使い、問題なくロードされます。そのために私は次のシムを使用します:

'backbone': { 
    'deps': ['jquery', 'underscore'], 
    'exports': 'Backbone' 
} 

しかし、ブートストラップのシムは私のために働いていません。私は明白な何かを欠いていますか

私はrequirejs、bootstrap、およびjQueryの最新バージョンを使用しています。

答えて

1

ブートストラップを実際にロードするコードは表示されていません。

require(["jquery", "bootstrap"], function($) { 
    console.log($.fn); 
}); 

場合は、あなたの混乱は発生場所これはです:あなたshimは言います、「あなたがbootstrapをロードする際に、負荷jquery最初に」あなたの最初のrequireに変更してください。 bootstrapのロードをトリガーしません。読み込みのためにrequireまたはdefineへの依存としてbootstrapをリストする必要があります。

+0

ありがとうございました。本当にそれは私を混乱させるものでした。私は 'requirejs.config'はスクリプトタグの束のようにすべてをロードするという印象を受けました。しかし、これはAMDの「非同期」ビットなのでしょうか? – ChrisM

+1

'requirejs.config()'は*トップレベル*で 'deps'オプションを使ってロードするモジュールのリストを提供しない限り、何もロードしません。 (これは設定のトップレベルにあり、個々の 'shim'値の' deps'と同じではありません)。トップレベル 'deps'は' require(< 'require.config'コールの直後に' deps>の値 ')を返します。 – Louis

+0

入手しました。説明をありがとうございます。 – ChrisM

関連する問題