Requirejs, чому і коли використовувати shim config

Я читаю документ Requjs звідси API

requirejs.config({
    shim: {
        'backbone': {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ['underscore', 'jquery'],
            //Once loaded, use the global 'Backbone' as the
            //module value.
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                //Using a function allows you to call noConflict for
                //libraries that support it, and do other cleanup.
                //However, plugins for those libraries may still want
                //a global. "this" for the function will be the global
                //object. The dependencies will be passed in as
                //function arguments. If this function returns a value,
                //then that value is used as the module export value
                //instead of the object found via the 'exports' string.
                return this.Foo.noConflict();
            }
        }
    }
});

але я не отримую шаленої частини. чому я повинен використовувати shim і як слід налаштувати, чи можу я отримати ще одне уточнення

будь-хто, може пояснити на прикладі, чому і коли ми повинні використовувати shim. Дякую.

Основне використання shim - це з бібліотеками, які не підтримують AMD, але вам потрібно керувати їх залежностями. Наприклад, у наведеному вище прикладі Backbone and Underscore: ви знаєте, що Backbone вимагає підкреслення, тому припустимо, що ви написали свій код так:

require(['underscore', 'backbone']
, function( Underscore, Backbone ) {

    // do something with Backbone

}

RequireJS запустить асинхронні запити як для підкреслення, так і для хребта, але ви не знаєте, який з них повернеться першим, тому можливо, що Backbone спробує зробити щось із підкресленням перед завантаженням.

ПРИМІТКА: цей приклад підкреслення / опорної кістки був написаний до того, як обидві бібліотеки підтримували AMD. Але цей принцип справедливий для будь-яких бібліотек сьогодні, які не підтримують AMD.

Гак "init" дозволяє робити інші вдосконалені речі, наприклад, якщо бібліотека зазвичай експортує дві різні речі в глобальний простір імен, але ви хочете їх переосмислити під єдиним простором імен. Або, можливо, ви хочете зробити кілька виправлень мавп на методах у бібліотеці, яку ви завантажуєте.

Докладніше:

• Оновлення до RequireJS 2.0 дає деяку історію того, як плагін замовлення намагався вирішити це в минулому.
• Дивіться розділ "Завантаження немодулів" цієї статті від Аарона Харді для ще одного хорошого опису.

Відповідно до документації API RequireJS, shim дозволяє вам

Налаштуйте залежності, експорт та ініціалізацію на замовлення для старих, традиційних сценаріїв "глобальних браузерних" скриптів, які не використовують define () для декларування залежностей та встановлення значення модуля.

- Налаштування залежностей

Скажімо, у вас є 2 модулі javascript (moduleA і moduleB), і один з них (moduleA) залежить від іншого (moduleB). Обидва вони необхідні для вашого власного модуля, тому ви вказуєте залежності в Requ () або визначаєте ()

require(['moduleA','moduleB'],function(A,B ) {
    ...
}

Але оскільки вимагає відстежувати AMD, ви не знаєте, який із них можна було б отримати рано. Тут на допомогу приходить шим.

require.config({
    shim:{
       moduleA:{
         deps:['moduleB']
        } 
    }

})

Це дозволить переконатися, що moduleB завжди отримується перед завантаженням модуляA.

- Налаштування експорту

Експорт Shim повідомляє RequireJS, який член глобального об’єкта (вікно, якщо, звичайно, ви перебуваєте в браузері), є фактичним значенням модуля. Скажімо, модульA додає себе до window"modA" (подібно до того, як jQuery і підкреслення робить як $ і _ відповідно), то ми зробимо наше значення експорту "modA".

require.config({
    shim:{
       moduleA:{
         exports:'modA'
        } 
    }

Це дасть RequireJS локальне посилання на цей модуль. Глобальний мод все ще буде існувати на сторінці.

-Настроювати ініціалізацію для старих "глобальних" браузерів

Це, мабуть, найважливіша особливість конфігурації shim, яка дозволяє нам додавати "глобальний браузер", "не AMD" сценарії (які також не відповідають модульній схемі) як залежності в нашому власному модулі.

Скажімо, moduleB - це звичайний старий JavaScript з лише двома функціями funcA () та funcB ().

function funcA(){
    console.log("this is function A")
}
function funcB(){
    console.log("this is function B")
}

Хоча обидві ці функції доступні у вікні області, RequireJS рекомендує використовувати їх через їх глобальний ідентифікатор / обробку, щоб уникнути плутанини. Тож налаштування шим як

shim: {
    moduleB: {
        deps: ["jquery"],
        exports: "funcB",
        init: function () {
            return {
                funcA: funcA,
                funcB: funcB
            };
        }
    }
}

Повернене значення з функції init використовується як значення експорту модуля замість об'єкта, знайденого через рядок 'export'. Це дозволить нам використовувати funcB у власному модулі як

require(["moduleA","moduleB"], function(A, B){
    B.funcB()
})

Сподіваюся, що це допомогло.

Ви повинні додати шляхи в Requjs.config, щоб оголосити, наприклад:

requirejs.config({
    paths: {
          'underscore' : '.../example/XX.js' // your JavaScript file
          'jquery' : '.../example/jquery.js' // your JavaScript file
    }
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                return this.Foo.noConflict();
            }
        }
    }
});