Requirejs por que y cuando usar shim config

Leí el documento requirejs desde aquí 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();
            }
        }
    }
});

pero no voy a recibir calzas . ¿Por qué debería usar shim y cómo debo configurar? ¿Puedo obtener más aclaraciones?

por favor, ¿alguien puede explicar con un ejemplo por qué y cuándo deberíamos usar calzas? Gracias.

Un uso principal de shim es con bibliotecas que no son compatibles con AMD, pero es necesario administrar sus dependencias. Por ejemplo, en el ejemplo anterior de Backbone y Underscore: sabe que Backbone requiere Underscore, así que suponga que escribió su código así:

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

    // do something with Backbone

}

RequireJS iniciará solicitudes asincrónicas para Underscore y Backbone, pero no sabe cuál volverá primero, por lo que es posible que Backbone intente hacer algo con Underscore antes de que se cargue.

NOTA: este ejemplo de subrayado / columna vertebral se escribió antes de que ambas bibliotecas admitieran AMD. Pero el principio es válido para cualquier biblioteca actual que no sea compatible con AMD.

El gancho "init" le permite hacer otras cosas avanzadas, por ejemplo, si una biblioteca normalmente exportaría dos cosas diferentes al espacio de nombres global pero desea redefinirlas en un solo espacio de nombres. O tal vez desee hacer un parche de mono en un método en la biblioteca que está cargando.

Más antecedentes:

• La actualización a RequireJS 2.0 brinda algo de historia sobre cómo el complemento de pedidos intentó resolver esto en el pasado.
• Consulte la sección "Carga de no módulos" de este artículo de Aaron Hardy para obtener otra buena descripción.

Según la documentación de la API RequireJS, shim te permite

Configure las dependencias, las exportaciones y la inicialización personalizada para los scripts "globales del navegador" tradicionales más antiguos que no usan define () para declarar las dependencias y establecer un valor de módulo.

- Configurar dependencias

Digamos que tiene 2 módulos javascript (moduleA y moduleB) y uno de ellos (moduleA) depende del otro (moduleB). Ambos son necesarios para su propio módulo, por lo que especifica las dependencias en require () o define ()

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

Pero dado que el propio requerimiento sigue a AMD, no tiene idea de cuál se buscaría antes. Aquí es donde Shim viene al rescate.

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

})

Esto aseguraría que el módulo B siempre se recupere antes de que se cargue el módulo A.

- Configurar exportaciones

Shim export le dice a RequireJS qué miembro del objeto global (la ventana, asumiendo que estás en un navegador, por supuesto) es el valor real del módulo. Digamos que moduleA se agrega a sí mismo windowcomo 'modA' (al igual que jQuery y el subrayado lo hacen como $ y _ respectivamente), luego hacemos que nuestro valor de exportación sea 'modA'.

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

Le dará a RequireJS una referencia local a este módulo. El modA global también existirá en la página.

-Inicialización personalizada para scripts "globales del navegador" más antiguos

Esta es probablemente la característica más importante de la configuración de shim que nos permite agregar scripts 'global del navegador', 'que no son de AMD' (que tampoco siguen un patrón modular) como dependencias en nuestro propio módulo.

Digamos que moduleB es un javascript antiguo y simple con solo dos funciones funcA () y funcB ().

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

Aunque ambas funciones están disponibles en el ámbito de la ventana, RequireJS nos recomienda usarlas a través de su identificador / identificador global para evitar confusiones. Así que configurando la cuña como

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

El valor de retorno de la función init se utiliza como valor de exportación del módulo en lugar del objeto encontrado a través de la cadena 'exportaciones'. Esto nos permitirá usar funcB en nuestro propio módulo como

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

Espero que esto haya ayudado.

Debe agregar rutas en requirejs.config para declarar, ejemplo:

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();
            }
        }
    }
});