Question

我正在将我的应用转换为使用require.js，但我似乎无法加载Bootstrap。这是我正在做的事情（下面假设一个简单的平面目录结构，没有子目录）：

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。

Answer 1

您没有显示任何实际导致加载Bootstrap的代码。将您的初始require更改为：

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

如果您的混淆源自此：shim说＆＃34;当您加载bootstrap时，首先加载jquery＆＃34;。它不会触发bootstrap的加载。您必须将bootstrap列为require或define的依赖项才能进行加载。

RequireJS - 无法加载Bootstrap

1 个答案: