Загрузка Highcharts через оболочку с использованием RequireJS и поддержание зависимости jQuery

Я пытаюсь загрузить библиотеку Highcharts, используя прокладку в RequireJS. Однако при загрузке Highcharts генерируется исключение, потому что он не может получить доступ к методам jQuery, от которых зависит.

Требуемая конфигурация выглядит следующим образом:

require.config({
    baseUrl: "js",

    shim: {

        'libs/highcharts/highcharts.src.js': {
            deps: ['jquery'],
            exports: function(jQuery)
            {
                this.HighchartsAdapter = jQuery;

                return this.Highcharts;
            }
        }
    }
});

Исключение, которое выдается:

Uncaught TypeError: undefined is not a function

и относится к этой строке:

dataLabels: merge(defaultLabelOptions, {

Проблема заключается в вызове merge, который в конечном итоге отображает обратно в jQuery (или какой-либо другой адаптер, который поддерживает Highcharts, но я просто использую jQuery).

Я точно не знаю, как обеспечить Highcharts доступ к jQuery с помощью RequireJS и shim.

Кто-нибудь раньше использовал вместе RequireJS и Highcharts? Я предполагаю, что проблема связана не с highcharts, а с любой библиотекой, которая имеет другие виды зависимостей.

Заранее спасибо за любые советы или указания в правильном направлении!

Чтобы добавить дополнительный контекст, в надежде, что кто-то, кто знаком с require.js или shims, сможет помочь, не будучи слишком близко знакомым с highcharts, вот какой-то источник, который устанавливает это слияниеметод в Highcharts

var globalAdapter = win.HighchartsAdapter,
adapter = globalAdapter || {},

// Utility functions. If the HighchartsAdapter is not defined, 
// adapter is an empty object
// and all the utility functions will be null. In that case they are 
// populated by the
// default adapters below.

// {snipped code}

merge = adapter.merge

// {snipped code}

if (!globalAdapter && win.jQuery) {
    var jQ = win.jQuery;

    // {snipped code}

    merge = function () {
        var args = arguments;
        return jQ.extend(true, null, args[0], args[1], args[2], args[3]);
    };

    // {snipped code}
}

Объект winпредставляет собой ссылку, установленную на windowв начале скрипта. Итак, я подумал добавить окно .jQuery = jQuery;для метода экспорта в прокладке приведет к тому, что highcharts подберет ссылку jQuery; но это не так.

Опять же, на данном этапе буду признательна за любое понимание, информацию, совет или критику — я в полной растерянности и начинаю сомневаться, стоит ли вообще пытаться внедрить систему пакетов AMD в javascript браузера.


Приняв ответ от paberaниже, я счел уместным обновить свой вопрос, чтобы отразить, как его ответ помог моему решению (хотя, в основном, это его ответ).

RequireJS использует «пути» для поиска библиотек, которые не поддерживаются «AMD», и загружает их на вашу страницу. объект «прокладка» позволяет вам определять зависимости для библиотек, определенных в путях. Зависимости должны быть загружены до того, как requirejs попытается загрузить зависимый скрипт.

Свойство exports предоставляет механизм, сообщающий requirejs, как определить, загружена ли библиотека. Для основных библиотек, таких как jquery, backbone, socketio и т. д., все они экспортируют некоторую переменную уровня окна (Backbone, io, jQueryи $. , так далее). Вы просто указываете это имя переменной как свойство exports, и requirejs сможет определить, когда загружается библиотека.

Как только ваши определения будут сделаны, вы можете использовать функцию requirejs' define, как и ожидалось.

Вот мой пример объекта require.config:

require.config({
    baseUrl: "/js/",

    paths: {
        jquery: 'jquery',
        socketio: 'http://localhost:8000/socket.io/socket.io', //for loading the socket.io client library
        highcharts: 'libs/highcharts/highcharts.src',
        underscore: 'libs/underscore',
        backbone: 'libs/backbone'
    },

    shim: {
        jquery: {
            exports: 'jQuery'
        },

        socketio: {
            exports: 'io'
        },

        underscore: {
            exports: '_'
        },

        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },

        highcharts: {
            deps: ['jquery'],
            exports: 'Highcharts'
        }
    }
});

Как упоминалось ранее pabera, это для Require.JSверсии 2.0.1. .

Надеюсь, кому-нибудь это пригодится; Я знаю, что дорога преградила мне дорогу на некоторое время; так что, надеюсь, мы удержали вас от удара головой о то же место в стене, что и мы, опубликовав это.

19
задан Jim Rubenstein 12 June 2012 в 21:16
поделиться