require.js charge les dépendances de manière incorrecte

Question

Voici donc la configuration, mon fichier de base est main.js qui définit les scripts qui sont nécessaires sur toutes les pages du site que je construis. Cela ressemble à ça :

define([
        '/javascript/requirePlugins/require-order.js!http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
        '/javascript/requirePlugins/require-order.js!/javascript/jquery-global-plugins.js',
        '/javascript/requirePlugins/require-order.js!/javascript/globals.js'
    ], function () {
        loadFonts();
    }
);

Il charge jQuery, certains plugins et le fichier global script. Sur une page, j'essaie de charger un plugin jQuery, mais le plugin essaie de se charger avant que jQuery ne soit chargé. Cela ressemble à ceci :

    require(['/javascript/requirePlugins/require-order.js!/main','/javascript/requirePlugins/require-order.js!/javascript/3rdparty/lemon-slider-0.2.js'], function () {
        $j('#carousel<%= ClientID %>').lemmonSlider({loop:false});
    });

La fonction ne semble pas suivre l'ordre demandé. Je ne suis même pas sûr de pouvoir imbriquer des fonctions ordonnées de la sorte. J'ai également essayé d'appliquer jQuery en tant que dépendance, mais cela ne fonctionne pas non plus :

    require(['/javascript/requirePlugins/require-order.js!/jquery','/javascript/requirePlugins/require-order.js!/javascript/3rdparty/lemon-slider-0.2.js'], function () {
        $j('#carousel<%= ClientID %>').lemmonSlider({loop:false});
    });

Toute suggestion sur la façon dont je m'y prends est appréciée, merci.

Answer 1

Le plugin order est supprimé et vous pouvez essayer la configuration shim pour charger les plugins dans l'ordre.

requirejs.config({
   paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
        'bootstrap': '../bootstrap/js/bootstrap.min',
        'select2': 'vendor/select2',
        'jshashtable': 'vendor/jshashtable-2.1',
        'jquery.numberformatter': 'vendor/jquery.numberformatter-1.2.3.min',
        'jq-datepicker': 'vendor/bootstrap-datepicker',
        'jq-datepicker.da': 'vendor/bootstrap-datepicker.da'
    }, 

    // Use shim for plugins that does not support ADM
    shim: {
        'bootstrap': ['jquery'],
        'select2': ['jquery'],
        'jq-datepicker': ['jquery'],
        'jshashtable': ['jquery'],
        'jquery.numberformatter': ['jquery', 'jshashtable']
    },
    enforceDefine: true
});

EDITAR:

require-jquery n'est plus maintenu non plus.

Answer 2

Le plugin order est utile si vous avez juste quelques scripts de haut niveau que vous voulez charger dans l'ordre et que ces scripts n'utilisent pas l'API de module supportée par requirejs. Cela ne fonctionne pas si bien si vous le mélangez ou l'utilisez pour charger des modules qui utilisent l'API de module define().

En particulier, order s'assure que le script est chargé en premier. Cependant, l'API define() spécifie d'autres script à charger, et le plugin order ne sait pas s'il doit attendre que ces script se chargent.

Pour ce problème particulier, je suggère d'utiliser require-jquery.js comme l'a suggéré sinsedrix. Cela, ou envelopper les scripts que vous utilisez dans les appels define(). volo peut vous aider à le faire grâce à sa commande amdify :

volo.js amdify path/to/lemon-slider-0.2.js depends=jquery

De plus, je définirais l'URL de base et j'utiliserais le "module naming" pour les dépendances au lieu des chemins complets. Cela permettra à l'optimiseur de fonctionner correctement. Vous pouvez également associer 'order' au chemin requirePlugins, ce qui permet de réduire le bruit des lignes. Je créerais également une entrée de chemin "jquery" afin que si vous intégrez les autres plugins dans des appels de définition, cela renvoie au jquery chargé dans votre fichier main.js. Ainsi, dans le niveau supérieur script de votre page :

requirejs.config({
    baseUrl: '/javascript/',
    paths: {
        order: 'requirePlugins/require-order',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
    }
});

Ensuite, votre main.js peut être écrit comme suit :

define([
        'order!jquery',
        'order!jquery-global-plugins',
        'order!globals'
    ], function () {
        loadFonts();
    }
);

Notez qu'ici, l'ordre d'utilisation est correct, tant que ces dépendances n'appellent pas elles-mêmes define().

Mais si vous enveloppez les scripts que vous utilisez dans les appels de définition, alors vous pouvez vous débarrasser de l'utilisation de l'ordre ! ci-dessus. Conservez cependant la configuration des chemins jquery.

Answer 3

Peut-être devriez-vous essayer d'utiliser la commande require-jquery : http://requirejs.org/docs/jquery.html

Ainsi, vous n'aurez pas à vous soucier du moment où jquery est chargé.