Коллапс Bootstrap конфликтует с несколькими jquery и bootstrap.js; требовать.JS

Вот один из способов сделать то, что, как я понимаю, вы хотите сделать. Операторы console.log просто существуют, чтобы проверить, что происходит. Если я добавлю следующий сегмент кода непосредственно перед вашим require вызовом в скрипке (и после вызова require.config), то коллапсирующий элемент работает нормально:

(function () {
    define("jquery-fake", [], function () { 
        console.log("jquery-fake"); 
        // Just return the already loaded jQuery.
        return $; 
    });

    define("bootstrap-fake", ["jquery"], function () { 
        console.log("bootstrap-fake");
        // Nothing to be done here.
    });

    var map = {};

    if ($)
        map.jquery = "jquery-fake";

    if ($.fn.popover)
        map.bootstrap = "bootstrap-fake";

    require.config({ map: { "*": map } });
})();

Вышесказанное не будет работать, если вы нетакже удалите jQuery из списка "внешних ресурсов". Прямо сейчас он загружается дважды , прежде чем RequireJS начнет загрузку что-нибудь.

Реквизиты:

1. Это должно появиться после вашего первоначального вызова require.config, но до того, как вы начнете загружать что-либо.

2. JQuery и Bootstrap, загруженные для WA2, должныуже быть загружены до запуска этого кода.

Как это работает:

1. Он определяет, загружен ли jQuery, проверяя, что $ установлен.

2. Он определяет, загружается ли Bootstrap, проверяя, является ли $.fn.popover существует. Я не знаю санкционированного способа проверить, был ли загружен Bootstrap. Я проверил код и не увидел $.fn.bootstrap или чего-то подобного, что предположительно было бы уникальным для Bootstrap. Он устанавливает метод popover, так что это то, что я использую.

3. Когда обнаруживается, что они уже присутствуют, карта для "*" заполняется так, что когда требуется jquery, вместо этого загружается jquery-fake, и аналогично для bootstrap.

4. Два поддельных модуля-это те, которые вы видите. определено в начале кода. На самом деле они ничего не загружают.

Скрипка

У меня уже была подобная проблема в прошлом. Меня до сих пор раздражает, что я с ним столкнулся, но я рад, что не один такой.

Способ, которым я обошел его, был именно таким, как вы определили, чтобы использовать $.noConflict(true).

Вам понадобятся два сценария require config.

Для WA1 вам потребуется настроить require обычным способом. Это позволит вам запускать его как отдельное веб-приложение, независимое от WA2:

require.config({
    paths: {
        'jquery': '//code.jquery.com/jquery-1.11.0.min.js',
        //...
    }
});

Для WA2 вам потребуется настроить требовать примерно так:

require.config({
    paths: {
        'jquery': 'src/jquery-no-conflict',
        'jquery-src': '//code.jquery.com/jquery-1.11.0.min.js',
        //...
    }
});

В jquery-no-conflict.js, мы загружаем jQuery, но возвращаем глобальный $ к версии, загруженной WA2:

define(['jquery-src'], function ($) {

    //unload the newly loaded version of jQuery
    $.noConflict(true);

    //return the original version
    return $;
});

Теперь, при загрузке из WA2, ваши define функции в WA1 будут вызывать jquery-no-conflict.js

Единственное, что мне не нравится в этом шаблоне, это то, что ваш HTML для WA1 теперь содержит две ссылки на jQuery, хотя глобальный $ все равно будет указывать на первый загруженный экземпляр jQuery.

Хотя я еще не пробовал, вероятно, вы можно применить аналогичный шаблон, используя Bootstrap noConflict

Пожалуйста, дайте мне знать, как у вас дела.