Я пытаюсь загрузить библиотеку 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, вот какой-то источник, который настраивает этот merge метод в 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 в начале скрипта. Итак, я подумал, что добавление 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.
Я надеюсь, что кто-то извлечет пользу из этого; Я знаю, что дорога преградила мне дорогу на некоторое время; так что, надеюсь, мы удержали вас от удара головой о то же место в стене, что и мы, опубликовав это.
