Как использовать RequireJS с jQuery

• Введение
• Глобальные функции
• Имя модуля
• Пример использования конфигурации shim
• Пример загрузки jQuery с CDN
• Сопоставление модулей для использования noConflict
• Предыдущий пример с объединённым файлом require-jquery

Введение

RequireJS загружает jQuery так же, как и любую другую зависимость. Однако широкое использование jQuery и обширная экосистема плагинов означают, что в вашем проекте могут быть другие скрипты, также зависящие от jQuery. Конфигурацию jQuery в RequireJS вы можете настроить по-разному, в зависимости от того, начинаете ли вы новый проект или адаптируете существующий код.

Глобальные функции

jQuery регистрирует себя как глобальные переменные "$" и "jQuery", даже когда он обнаруживает AMD/RequireJS. Подход AMD не рекомендует использовать глобальные функции, но решение о том, отключить ли эти глобальные переменные jQuery, зависит от наличия не-AMD кода, который зависит от них. jQuery имеет функцию noConflict, которая позволяет освободить контроль над глобальными переменными, и это можно автоматизировать в вашем requirejs.config, как мы увидим позже.

Имя модуля

jQuery определяет именованный AMD-модуль 'jquery' (все строчные буквы), когда обнаруживает AMD/RequireJS. Для уменьшения путаницы рекомендуется использовать 'jquery' в качестве имени модуля в вашем requirejs.config.

Пример:

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. Тогда запись путей выше не потребуется.

Вы можете избежать множества строк конфигурации, разместив файлы в соответствии с соглашением по умолчанию о соответствии ID пути baseUrl + moduleID + '.js'. Примеры ниже показывают, как установить baseUrl в каталог для стороннего кода библиотек и использовать одну дополнительную конфигурацию путей для вашего кода приложения.

Таким образом, вероятнее всего, у вас возникнет ошибка, если вы ссылаетесь на jQuery с другим именем модуля, например 'lib/jquery'. Этот пример не будет работать:

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

Он не будет работать, так как jQuery регистрирует себя с именем 'jquery', а не 'lib/jquery'. В общем случае явное указание имен модулей в вызове define() не рекомендуется, но jQuery имеет некоторые особые ограничения.

Пример использования конфигурации shim

В этом примере показано, как использовать конфигурацию shim для указания зависимостей для плагинов jQuery, которые не вызывают define(). Этот пример полезен, если у вас есть существующий проект jQuery, который вы хотите преобразовать, и не хотите изменять исходный код плагинов jQuery, чтобы вызвать define().

Пример использования jQuery с конфигурацией shim

Пример загрузки jQuery с CDN

Это пример того, как загрузить и оптимизировать ваш код при загрузке jQuery с Content Delivery Network (CDN). Этот пример требует, чтобы все ваши плагины jQuery вызывали define() для правильного выражения своих зависимостей. Конфигурация shim не работает после оптимизированных сборках с ресурсами CDN.

Пример использования jQuery с CDN

Сопоставление модулей для использования noConflict

Если все ваши модули (включая любые сторонние плагины jQuery или библиотечный код, зависящие от jQuery) совместимы с AMD, и вы хотите избежать наличия $ или jQuery в глобальном пространстве имён, когда они вызывают requirejs(['jquery']), вы можете использовать конфигурацию map для сопоставления использования jQuery с модулем, который вызывает noConflict и возвращает значение jQuery для идентификатора модуля 'jquery'.

Вы можете использовать этот пример с примером 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

Ранее мы ссылались на пример, использующий специальный файл require-jquery, который включал require.js и jQuery. Это больше не рекомендуемый способ использования jQuery с require.js, но если вы ищете (уже не поддерживаемый) пример, вы можете найти его здесь.