簡介 § 1

雖然 RequireJS 載入 jQuery 就如同載入其他相依性，但 jQuery 廣泛的使用和豐富的擴充功能生態系統，表示您的專案中可能還有其他也依賴 jQuery 的指令碼。您可能會根據是開始一個新專案，還是改編現有的程式碼，而以不同的方式來處理您的 jQuery RequireJS 組態。

全域函式 § 2

即使偵測到 AMD/RequireJS，jQuery 也會將自己註冊為全域變數 "$" 和 "jQuery"。AMD 方法建議不要使用全域函式，但關閉這些 jQuery 全域變數的決定，端視您是否有非 AMD 程式碼依賴它們而定。jQuery 有個 noConflict 函式，支援釋出全域變數的控制權，而且這可以在您的 requirejs.config 中自動化，稍後我們將會看到 相關內容。

模組名稱 § 3

當偵測到 AMD/RequireJS 時，jQuery 會定義 名為 AMD 模組 的 'jquery'（全部小寫）。為了減少混淆，我們建議在您的 requirejs.config 中使用 'jquery' 作為模組名稱。

範例

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        // the left side is the module ID,
        // the right side is the path to
        // the jQuery file, relative to baseUrl.
        // Also, the path should NOT include
        // the '.js' file extension. This example
        // is using jQuery 1.9.0 located at
        // js/lib/jquery-1.9.0.js, relative to
        // the HTML page.
        jquery: 'jquery-1.9.0'
    }
});

另一個（建議）的解決方案，就是將檔案命名為 'jquery.js'，並將其放在 baseUrl 目錄中。這樣就不需要上述的 paths 項目了。

您可以透過將檔案放置在預設 ID 到路徑慣例 baseUrl + moduleID + '.js' 中，來避免許多組態列。以下範例顯示如何設定 baseUrl 為第三方程式庫程式碼的目錄，並為您的應用程式程式碼使用一個額外的 paths 組態。

因此重申一下，如果您使用另一個模組名稱（例如 'lib/jquery'）來參照 jQuery，您可能會收到錯誤訊息。此範例無法執行


    // THIS WILL NOT WORK
    define(['lib/jquery'], function ($) {...});

它無法執行，因為 jQuery 使用 'jquery' 而不是 'lib/jquery' 的名稱來註冊自己。一般而言，不建議在 define() 呼叫中明確命名模組，但 jQuery 有些特殊限制。

使用 shim config 的範例 § 4

此範例顯示如何使用 shim config 來指定未呼叫 define() 的 jQuery 外掛程式相依性。如果您有一個現有的 jQuery 專案想要轉換，而且不想要修改 jQuery 外掛程式的原始碼來呼叫 define()，這個範例會很有用。

使用 jQuery 和 shim config 的範例

從 CDN 載入 jquery 的範例 § 5

此範例顯示如何從 內容傳遞網路 (CDN) 載入 jQuery 時，載入和最佳化您的程式碼。此範例需要您的所有 jQuery 外掛程式呼叫 define()，才能適當地表達它們的相依性。在使用 CDN 資源最佳化建置後，shim config 無法執行。

使用 CDN 中的 jQuery 的範例

對應模組以使用 noConflict § 6

如果所有模組（包括任何依賴 jQuery 的第三方 jQuery 外掛程式或函式庫程式碼）都相容 AMD，而您想在它們呼叫 requirejs(['jquery']) 時避免在全域命名空間中出現 $ 或 jQuery，您可以使用 對應設定 將 jQuery 的使用對應至呼叫 noConflict 並傳回 jQuery 值的模組，作為「jquery」模組 ID。

您可以將此範例與上述 CDN 範例搭配使用，shim 範例無法使用，因為已套用 shim 的函式庫需要全域 jQuery。

requirejs.config({
    // Add this map config in addition to any baseUrl or
    // paths config you may already have in the project.
    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' }
    }
});

// and the 'jquery-private' module, in the
// jquery-private.js file:
define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

這表示任何使用 jQuery 的模組都需要使用 AMD 傳回值，而不是依賴全域 $


requirejs(['jquery'], function( $ ) {
    console.log( $ ) // OK
});

requirejs(['jquery'], function( jq ) {
    console.log( jq ) // OK
});

requirejs(['jquery'], function( ) {
    console.log( $ ) // UNDEFINED!
});

使用串接的 require-jquery 檔案的前一個範例 § 7

先前，我們一直指向一個使用特殊 require-jquery 檔案的範例，其中包含串接的 require.js 和 jQuery。這不再是使用 require.js 搭配 jQuery 的建議方式，但如果您正在尋找（不再維護的）範例，您可以在這裡找到 require-jquery。