RequireJS - 无法加载 Bootstrap答案

【问题标题】：RequireJS - cannot load BootstrapRequireJS - 无法加载 Bootstrap
【发布时间】：2016-05-30 01:20:50
【问题描述】：

我正在将我的应用程序转换为使用 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。

【问题讨论】：

标签： twitter-bootstrap requirejs

【解决方案1】：

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

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

如果这是您的困惑的根源：您的shim 说“当您加载bootstrap 时，首先加载jquery”。它不会触发bootstrap 的加载。您必须将 bootstrap 列为 require 或 define 的依赖项才能进行加载。

【讨论】：

谢谢你，成功了。的确，这让我感到困惑。我的印象是requirejs.config 只会加载所有内容，就像在一堆脚本标签的情况下一样。但我想这是 AMD 的“异步”位，对吧？
requirejs.config() 不会加载任何内容，除非您在顶级使用 deps 选项来提供要加载的模块列表。（这是配置的顶层。它与单个shim 值中的deps 不同。）请注意，顶层deps 完全与在require.config 调用之后立即执行require(<value of deps>)。
知道了。谢谢你的澄清。