2016-05-29 79 views
0

我正在将我的应用程序转换为使用require.js,但似乎无法加载Bootstrap。这是在外形我在做什么(以下假定一个简单的平面目录结构,没有子目录):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> 

我的Bootstrap导航栏下拉菜单不起作用,事实上,当我在控制台中调查jQuery对象本身时,我看不到任何从bootstrap.min.js附加的东西。但我看不出我做错了什么。我真正的应用程序也使用Backbone,并且没有问题的加载。为此,我使用以下垫片:

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

但是Bootstrap的垫片对我来说不起作用。我错过了明显的东西吗?

我使用的是requirejs,bootstrap和jQuery的最新版本。

回答

1

您尚未显示任何实际会导致Bootstrap加载的代码。更改初始require到:

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

如果这就是你的困惑来源于:你shim说:“当你加载bootstrap,负载jquery第一”。它不会触发加载bootstrap。您必须列出bootstrap作为对requiredefine的依赖关系才能进行加载。

+0

谢谢你,工作。事实上,这让我感到困惑。我的印象是:requirejs.config只会加载所有内容,就像一堆脚本标记一样。但我想这是AMD的'异步',对吧? – ChrisM

+1

'requirejs.config()'不会加载任何东西,除非您使用*顶级*处的'deps'选项来提供要加载的模块列表。 (这个是在配置的最高层,它不同于'shim'内部的'deps')。注意顶级'deps'和* require(<在require.config'调用之后立即调用deps>)。 – Louis

+0

明白了。谢谢你的澄清。 – ChrisM