RequireJS 和本地 bootstrap.js 文件不起作用答案

【问题标题】：RequireJS and local bootstrap.js file not workingRequireJS 和本地 bootstrap.js 文件不起作用
【发布时间】：2014-08-27 10:47:57
【问题描述】：

我正在尝试将 Bootstrap 与 RequireJS 一起使用，像这样设置 RequireJS 的配置：

js/
- bootstrap.min.js
- app.js
- require.js
- scripts.js

这是app.js 文件：

requirejs.config({ 
  "shim": { 
    "bootstrap": {deps : 'jquery' } 
  }, 
  "paths": { 
    "jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min", 
    "bootstrap" : "bootstrap.min" 
  }, 
  enforceDefine : true 
});

// Load the main app module to start the app 
requirejs(["scripts"]);

这是scripts.js 文件：

define(["jquery", "bootstrap"], function($) {
    console.log(jQuery);
    $('#video').click(function () {
    var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1';
        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', src);
    });  
    $('#myModal button').click(function () {
        $('#myModal iframe').removeAttr('src');
    });
});

这不起作用，并且在控制台上说 Bootstrap 需要 jQuery 才能工作。奇怪的是，如果我更改 Bootstrap 的路径以从 CDN 加载它，它就可以工作。

【问题讨论】：

这里不是肯定的，但我认为我在使用模式时遇到了类似的问题，我需要包含 bootstrap.js 文件而不是 jquery。我认为它说它需要 jquery，因为 bootstrap.js 是 jquery 的修改版本。

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 requirejs

【解决方案1】：

您的 Bootstrap 填充程序应该使用数组来指定依赖项：

shim: { 
    "bootstrap": {
        deps : ['jquery'] // Use an array even with a single dependency.
    } 
}

现在 RequireJS 的方式没有得到你指定的依赖。（它可能会将字符串解释为一个数组并查找模块j、q 等。我对此不确定...）因此，无论是否加载了 jQuery，它都会加载 Bootstrap。

当你使用 CDN 时它可以工作，这可能是因为时间差异：它需要足够长的时间从 CND 中获取 jQuery 在 Bootstrap 加载之前加载。当您在本地执行此操作时，Boostrap 加载速度过快，并且尚未加载 jQuery。无论如何，使用我上面显示的数组应该可以解决问题。

【讨论】：

嗨，我在发布问题之前寻找了解决方案，我之前尝试过你的解决方案，但它没有工作:(它显示一条消息说 Bootstrap 需要 jQuery

【解决方案2】：

感谢您的帮助，当我下载 RequireJS 时，我从来没有意识到我使用的是什么版本。
我以为我有最新的，但我使用的是 1.0.8，我升级了，现在我有 2.1.14，解决了问题。没有必要像许多条目所说的那样在 shim 对象上使用导出

shim: { 
    "bootstrap": {
        deps : ['jquery'], // Use an array even with a single dependency.  
        export : '$.fn.modal'
    } 
}

感谢您的帮助：D

【讨论】：