Требовать, почему и когда использовать конфигурацию shim

Я читаю документ requirejs отсюда 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. почему я должен использовать прокладку и как мне настроить, могу ли я получить еще несколько пояснений

пожалуйста, любой может объяснить пример, почему и когда мы должны использовать прокладку. спасибо.

ОТВЕТЫ

Ответ 1

Основное использование прокладки - это библиотеки, которые не поддерживают AMD, но вам нужно управлять их зависимостями. Например, в примере Backbone и Underscore выше: вы знаете, что Backbone требует Underscore, поэтому предположим, что вы написали свой код следующим образом:

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

    // do something with Backbone

}

RequireJS начнет асинхронные запросы как для Underscore, так и для Backbone, но вы не знаете, какой из них будет возвращен первым, поэтому возможно, что Backbone попытается что-то сделать с помощью Underscore перед его загрузкой.

ПРИМЕЧАНИЕ. этот пример подчеркивания/базовой схемы был написан до того, как обе библиотеки поддерживали AMD. Но принцип справедлив для любых библиотек сегодня, которые не поддерживают AMD.

Крючок "init" позволяет выполнять другие расширенные действия, например. если библиотека обычно экспортирует две разные вещи в глобальное пространство имен, но вы хотите переопределить их в одном пространстве имен. Или, может быть, вы захотите выполнить некоторую попытку обезьян по методам в библиотеке, которую вы загружаете.

Больше фона:

Ответ 2

Согласно документации API RequireJS, прокладка позволяет вам

Настройте зависимости, экспорт и пользовательскую инициализацию для старые, традиционные "браузерные глобальные" скрипты, которые не используют define() для объявления зависимостей и установки значения модуля.

- Настройка зависимостей

Допустим, у вас есть 2 модуля javascript (moduleA и moduleB), и один из них (moduleA) зависит от другого (moduleB). Оба они необходимы для вашего собственного модуля, поэтому вы указываете зависимости в require() или define()

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

Но так как требуйте от себя следовать AMD, вы не представляете, какой из них можно будет получить раньше. Вот где шалость приходит на помощь.

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

})

Это позволит убедиться, что модульB всегда извлекается до загрузки модуля A.

- настройка экспорта

Экспорт Shim указывает RequireJS, какой элемент на глобальном объекте (конечно, окно, если вы в браузере) является фактическим значением модуля. Допустим, модуль А добавляет себя к window как 'modA' (точно так же, как jQuery и подчеркивание делают как $и _ соответственно), тогда мы делаем наш экспорт значение 'modA'.

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

Он предоставит RequireJS локальную ссылку на этот модуль. Глобальный modA все еще будет существовать на странице.

- Обычная инициализация для старых "глобальных" браузеров

Это, пожалуй, самая важная особенность конфигурации shim, которая позволяет нам добавлять сценарии "браузер глобального", "не-AMD" (которые также не соответствуют модульному шаблону) в качестве зависимостей в нашем собственном модуле.

Давайте скажем, что модульB - это простой старый 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()
})

Надеюсь, что это помогло.

Ответ 3

Вы должны добавить пути в requirejs.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();
            }
        }
    }
});