web-dev-qa-db-fra.com

Chargement de jQuery, Underscore et Backbone à l'aide de RequireJS 2.0.1 et de shim

J'expérimente un peu avec RequireJS 2.0.1. Mon objectif est de charger correctement jQuery, Underscore et Backbone. De l'original RequireJS doc j'ai découvert que l'auteur J. Burke a ajouté (à cette nouvelle version) un nouvelle option de configuration appelée shim .

Ensuite, j'ai écrit ce truc ici:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Testing time</title>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>Testing time</h1>
    </body>
</html>

scripts/main.js

requirejs.config({
    shim: {
        'libs/jquery': {
            exports: '$'
        },
        'libs/underscore': {
            exports: '_'
        },
        'libs/backbone': {
            deps: ['libs/underscore', 'libs/jquery'],
            exports: 'Backbone'
        }
    }
});


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'],

    function (jQueryLocal, underscoreLocal, backboneLocal) {
        console.log('local', jQueryLocal);
        console.log('local', underscoreLocal);
        console.log('local', backboneLocal);
        console.log('global', $);
        console.log('global', _);
        console.log('global', Backbone);
    }
);

Tout semble fonctionner assez bien, mais j'ai le sentiment qu'il me manque quelque chose, je sais qu'il existe AMDed version de jQuery et Underscore mais si la configuration est si simple je ne le fais pas comprendre pourquoi je devrais les utiliser.

Alors, cette configuration est-elle correcte ou il me manque quelque chose?

javascriptrequirejsshim
31
vrde

Vous n'avez besoin d'utiliser la configuration "shim" que si la bibliothèque n'appelle pas déjà define() pour déclarer un module. jQuery le fait déjà, vous pouvez donc le supprimer de la configuration du shim. Le code ci-dessus fonctionnera tel quel, mais la configuration du shim d'exportation pour jQuery sera ignorée car jQuery appellera define() avant que le travail de shim ne soit terminé.

Les inconvénients du shim par rapport à l'appel de script define() pour définir un module:

  1. Il est moins portable/fiable: chaque développeur doit effectuer la configuration du shim et suivre les modifications de la bibliothèque. Si l'auteur de la bibliothèque le fait en ligne dans la bibliothèque, tout le monde en profite plus efficacement. Les modèles de code à mdjs/umd peuvent vous aider avec ce changement de code.

  2. Chargement de code moins optimal: la configuration de shim fonctionne en chargeant les déps de shim avant de charger la bibliothèque réelle. Il s'agit donc d'un chargement un peu plus séquentiel que parallèle. C'est plus rapide si tous les scripts peuvent être chargés en parallèle, ce qui est possible lorsque define() est utilisé. Si vous effectuez une compilation/optimisation pour le déploiement final et combinez tous les scripts en un seul script, ce n'est pas vraiment un inconvénient.

32
jrburke

Ce que vous faites est correct, mais jQuery n'a pas besoin d'être dans la configuration du shim car il exporte un module AMD (Asynchronous Module Definition). Underscore a rapidement supprimé son support pour AMD/Require.js après l'avoir ajouté, voir: Pourquoi underscore.js a supprimé le support pour AMD

Shim est conçu pour faciliter l'utilisation de bibliothèques qui n'exportent pas de module AMD. Si la bibliothèque que vous utilisez prend en charge AMD ou a 2 versions (une qui prend en charge AMD et une qui est une variable globale), vous devez utiliser la version AMD. Vous devez utiliser la version AMD pour les mêmes raisons que vous utiliseriez AMD en premier lieu et aussi parce que la bibliothèque peut inclure require.js (ou Almond ) dans sa source et ajouterait une taille de fichier inutile à votre projet.

8
hapticdata

Pouvez-vous éviter de "shimming" jquery dans l'exemple d'origine (où le chemin de jquery est défini sur 'libs/jquery'), puisque jquery ajoute le nom "jquery" dans leur définition de module AMD?

define ("jquery", [], function () {return jQuery;});

Mon expérience est que vous devez mettre jquery.js dans le répertoire baseurl pour obtenir le module jquery AMD défini comme prévu, ou "shim" comme dans l'exemple d'origine.

0
Claudijo