Bootstrap.js 与 require.js 冲突并禁用导航栏下拉菜单

Question

我在一个 Django 网站上工作，所以我有一个 base.html 包含我所有常用的东西，并将其扩展到我需要的页面

整个站点使用的常用脚本在我的base.html：

<script src="/static/js/libs/jquery/jquery.js"></script>
<script src="/static/js/libs/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script src="/static/js/libs/bs3/bootstrap.min.js"></script>

我的 dashboard.html 扩展了 base.html ，我将 require.js only 用于 dashboard.html，它在最底部包含以下内容：

<script data-main="/static/js/dashboard/main" src="/static/js/libs/require/require.js" type="application/javascript"></script>

我的main.js

requirejs.config({
    paths: {
        'jquery': '../libs/jquery/jquery.min',

        // NOTE 1
        //'bootstrap': '../libs/bs3/bootstrap.min',

        // Backbone JS & Co
        "underscore": '../libs/underscore/underscore-min',
        "backbone": '../libs/backbone/backbone-min',

        // Dashboard Chart
        "salesView": 'views/Sales/DailySalesView',
    },
});

// Load Dashboard elements
require(["jquery", "underscore", "backbone", "salesView"], function ($, _, Backbone, SalesView) {

    // Show modal when dashboard page loads
    $('#loading-modal').modal('toggle');

}, function (err) {
    console.log(err)
});

注意 1：

当我在main.js 中启用bootstrap 时，模式加载正常，但顶部导航栏下拉菜单ul.nav > li.dropdown 停止工作。

所以我在main.js 中禁用了bootstrap，因为bootstrap.js 已经添加到我的base.html 中。顶部导航栏下拉菜单现在可以使用但我收到以下错误

TypeError: $(...).modal is not a function

问：由于bootstrap.js 已经添加到我的base.html 中，我假设它已经加载并且main.js 应该可以访问它。为什么不是这样？我该如何解决？

任何帮助/建议将不胜感激。

提前致谢

Answer 1

您正在加载带有script 标签的jQuery，并使用RequireJS 加载它。这是混乱的秘诀。发生的情况是 Bootstrap 安装在加载有 script 的 jQuery 上，但没有安装在 RequireJS 加载的那个上。

解决问题的一种方法是从路径中删除 jquery，然后在 main.js 中添加一个伪造的 jquery 模块，该模块只是重用加载了 script 的模块：

define('jquery', function () {
    return $; // Just return the jQuery loaded with `script`.
});

在您致电requirejs.config 之后但在您致电require 之前添加它。