Загрузка jQuery, поддерево и магистрали с использованием RequireJS 2.0.1 и прокладки

Я немного экспериментирую с RequireJS 2.0.1. Моя цель - правильно загрузить jQuery, Underscore и Backbone. Из оригинального RequireJS doc Я обнаружил, что автор Дж. Берк добавил (к этой новой версии) новый вариант конфигурации, называемый shim.

Затем я написал этот материал здесь:

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

Кажется, все работает нормально, но у меня такое ощущение, что я что-то упустил, я знаю, что есть версия jQuery и Underscore в AMDed, но если настройка настолько проста, я не понимаю, почему я должен их использовать.

Итак, эта настройка правильная или я чего-то не хватает?

Ответ 1

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

Недостатки с прокладкой и вызов script define() для определения модуля:

Это менее портативно/надежно: каждый разработчик должен выполнить конфигурацию прокладки и отслеживать изменения в библиотеке. Если автор библиотеки делает это встроенным в библиотеку, каждый получает преимущества более эффективно. Шаблоны кода в umdjs/umd могут помочь с этим изменением кода.
Менее оптимальная загрузка кода: настройка shim выполняется путем загрузки прокладок перед загрузкой фактической библиотеки. Таким образом, это немного более последовательная загрузка, чем параллельная. Это быстрее, если все скрипты могут быть загружены параллельно, что возможно при использовании define(). Если вы выполните сборку/оптимизацию для окончательного развертывания и объедините все сценарии в один script, это не является недостатком.

Ответ 2

То, что вы делаете, правильно, но jQuery не обязательно должен находиться в конфигурации shim, потому что он экспортирует AMD (асинхронный Module Definition). Underscore быстро удалил поддержку AMD/Require.js, добавив: Почему underscore.js удалил поддержку для AMD.

Shim предназначен для удобства использования библиотек, которые не экспортируют модуль AMD. Если используемая вами библиотека поддерживает AMD или имеет 2 версии (поддерживающие AMD, а другую глобальную переменную), вы должны использовать версию AMD. Вы должны использовать версию AMD по тем же причинам, что и использовать AMD в первую очередь, а также потому, что библиотека может включать require.js(или Almond) в своем источнике и добавит ненужный размер файла в ваш проект.

Ответ 3

Можно ли вообще избежать "shimming" jquery в исходном примере (где путь к jquery установлен в "libs/jquery" ), поскольку jquery добавляет имя "jquery" в их определение модуля amd?

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

Мой опыт заключается в том, что вам нужно поместить jquery.js в каталог baseurl, чтобы получить модуль jquery amd, определенный как ожидаемый, или "переделать" его как в исходном примере.