使用noConflict jQuery包含帶有requireJS的jQuery UI

Question

我正在開發一個使用jQuery的JavaScript模塊，jQuery UI（draggable）和jPlayer的一些功能。 最近我讓自己熟悉requireJS來正確管理依賴項。

我不想與包含我的腳本的網站可能已經存在的jQuery版本產生沖突。 出於這個原因，我將jQuery依賴項映射到模塊“jquery-private”，調用noConflict（），如requireJS 指南中所述 。

由於jQuery UI占用了大量空間，我還想包含我實際使用的模塊。 ui.draggable有依賴項ui.core，ui.mouse和ui.widget，所以我應該包含這4個模塊。

我的問題是我希望jQuery UI模塊和jPlayer模塊使用我自己的jQuery版本，但顯然在調用noConflict（）方法后，全局$變量無法訪問它。 不幸的是，jQuery UI和jPlayer都不是AMD模塊，因此我需要為它們制作墊片配置。

這是我對依賴項的定義：

require.config({
    baseUrl: 'javascript/modules',
    paths: {
        jquery: 'jquery-2.1.3',
        jPlayer: 'jquery.jplayer',
        uiCore: 'jquery.ui.core',
        uiMouse: 'jquery.ui.mouse',
        uiWidget: 'jquery.ui.widget',
        uiDraggable: 'jquery.ui.draggable'
    },
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },

      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    },
    shim: {
        jPlayer: {
            deps: ['jquery']
        },
        uiCore: {
            deps: ['jquery']
        },
        uiMouse: {
            deps: ['jquery','uiCore']
        },
        uiWidget: {
            deps: ['jquery','uiCore']
        },
        uiDraggable: {
            deps: ['jquery','uiCore','uiMouse','uiWidget']
        }
    }
});

require(["json","jquery","jPlayer","uiDraggable"], function(json,___jQuery,jplayer,uiDraggable) {
    (...)
}

顯然，由於未定義jQuery UI模塊中的$變量，此代碼會產生錯誤。

有沒有辦法將我自己的jQuery對象傳遞給模塊？ 另一個線程中的最佳答案（ 如何使用require.js加載帶有noConflict的jQuery ）表明我想要做的事情是不可能的，但也許有其他方法可以做到這一點？

如果沒有，我可能不得不使用全局變量並大量編輯包含的模塊，這使得為什么首先使用像requireJS這樣的依賴管理庫有疑問...

Answer 1

我在jquery.ui中的每個模塊的頂部找到了以下代碼：

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define([ "jquery" ], factory );
    } else {
        // Browser globals
        factory( jQuery );
    }
}(function( $ ) {...});

這意味着jquery.ui會檢查何時定義全局AMD“定義”函數，並使用“jquery”作為模塊的AMD參考。

它將利用基於在requirejs建議沒有jQuery的沖突這個和這個 。

以及如何在 AMD中使用 jQuery。