web-dev-qa-db-fra.com

Require pourquoi et quand utiliser shim config

j'ai lu le requirejs document à partir d'ici 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();
            }
        }
    }
});

mais je ne reçois pas shim en partie. pourquoi devrais-je utiliser shim et comment dois-je configurer, puis-je obtenir des précisions supplémentaires

s'il vous plaît, quelqu'un peut-il expliquer par un exemple pourquoi et quand utiliser Shim? Merci.

javascriptrequirejsamd
96
Anil Gupta

Une utilisation principale de shim concerne les bibliothèques qui ne prennent pas en charge AMD, mais vous devez gérer leurs dépendances. Par exemple, dans les exemples Backbone et Underscore ci-dessus: vous savez que Backbone requiert Underscore. Supposons donc que vous avez écrit votre code comme suit:

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

    // do something with Backbone

}

RequireJS lancera des requêtes asynchrones pour Underscore et Backbone, mais vous ne savez pas laquelle reviendra en premier . Il est donc possible que Backbone essaie de faire quelque chose avec Underscore avant qu'il ne soit chargé.

REMARQUE: Cet exemple de trait de soulignement/réseau principal a été écrit avant que ces deux bibliothèques ne prennent en charge AMD. Mais le principe est valable pour toutes les bibliothèques qui ne supportent pas AMD.

Le crochet "init" vous permet de faire d'autres choses avancées, par exemple. si une bibliothèque exporte normalement deux objets différents dans l'espace de noms global mais que vous souhaitez les redéfinir sous un seul espace de noms. Ou peut-être voudrez-vous appliquer des correctifs monkey sur les méthodes de la bibliothèque que vous chargez.

Plus de fond:

109
explunit

Conformément à la documentation de l'API RequireJS, shim vous permet

Configurez les dépendances, les exportations et l'initialisation personnalisée pour les scripts plus anciens et traditionnels "de globes de navigateur" qui n'utilisent pas define () pour déclarer les dépendances et définir une valeur de module.

- Configuration des dépendances

Disons que vous avez 2 modules javascript (moduleA et moduleB) et que l'un d'eux (moduleA) dépend de l'autre (moduleB). Ces deux éléments sont nécessaires pour votre propre module, vous devez donc spécifier les dépendances dans require () ou define ().

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

Mais puisque vous-même devez suivre AMD, vous ne savez pas lequel serait récupéré plus tôt. C'est là que Shim vient à la rescousse.

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

})

Cela permettrait de s'assurer que le module B est toujours récupéré avant le chargement du module A.

- Configuration des exports

Shim Export indique à RequireJS quel membre de l'objet global (la fenêtre, si vous êtes dans un navigateur, bien sûr) est la valeur réelle du module. Disons que moduleA s'ajoute lui-même au window en tant que 'modA' (tout comme jQuery et le soulignement font respectivement $ et _), puis nous donnons à nos exportations une valeur 'modA'.

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

Cela donnera à RequireJS une référence locale à ce module. Le modA global existera toujours sur la page également.

- Initialisation personnalisée pour les anciens scripts "navigateur global"

C’est probablement la caractéristique la plus importante de shim config qui nous permet d’ajouter des scripts de type "navigateur global", "non AMD" (qui ne suivent pas le modèle modulaire) en tant que dépendances dans notre propre module.

Disons que moduleB est du vieux javascript ordinaire avec seulement deux fonctions funcA () et funcB ().

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

Bien que ces deux fonctions soient disponibles dans la portée de la fenêtre, RequireJS nous recommande de les utiliser via leur identificateur global/handle pour éviter toute confusion. Donc, configurer la cale comme

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

La valeur de retour de la fonction init est utilisée comme valeur d'exportation du module à la place de l'objet trouvé via la chaîne 'exports'. Cela nous permettra d’utiliser funcB dans notre propre module en tant que

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

J'espère que cela a aidé.

63
nalinc