Сохранение зависимости jQuery для высоких диаграмм с помощью оптимизатора requireJS

Question

Я тестирую requireJS и пытаюсь сделать простой проект с использованием высоких диаграмм. Я начал с requireJS multipage example project в качестве отправной точки.

My dir структура выглядит так же, как базовая структура, с highstock.js, добавленным в каталог lib.

• page1.html: страница 1 приложения.
• страница2.html: стр. 2 приложения.
• JS
  • приложение: каталог для хранения модулей для приложений.
  • lib: каталог для хранения сторонних модулей, таких как jQuery.
  • common.js: содержит конфигурацию requirejs, и это будет цель построения для набора общих модулей.
  • страница1.js: используется для передачи данных для страницы1.html. Грузы общего модуля, а затем загружает приложения/main1, основной модуль для страницы 1.
  • page2.js: используется для данных магистрали для page2.html. Нагрузки общего модуля, а затем загружает приложения/main2, основной модуль для страницы 2.

common.js содержит настройки, и я добавил подкладку для highstock там:

requirejs.config({ 
    baseUrl: 'js/lib', 
    paths: { 
     app: '../app' 
    }, 
    shim: { 
     "highstock": { 
      "exports": "Highcharts", 
      "deps": [ "jquery"] 
     }, 
    } // end Shim Configuration 
    }); 

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

optimize: "none", 
mainConfigFile: '../www/js/common.js', 

В приложениях/main1.js Я добавил var HighCharts= require('highstock');, а затем я пытаюсь использовать его.

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

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

My build создает 3 файла, common.js, page1.js и page2.js.

Соответствующие части выхода сборки:

js/lib/../common.js 
---------------- 
js/lib/../common.js 
js/lib/jquery.js 
... 

js/lib/../page1.js 
---------------- 
js/lib/../page1.js 
js/lib/highstock.js 
js/app/main1.js 
... 

Моя страница затем ссылается на встроенный page1. Когда он пытается загрузить модуль highstock, он выдает ошибку, поскольку jQuery еще не загружен/недоступен.

Когда я вижу встроенную страницу1, я могу понять, почему.

require(['./common'], function (common) { 
    require(['app/main1']); //highcharts is in main1 in the non-optimized version 
}); 

define("../page1", function(){}); 
//a few more defines 

(function() { // start highcharts module definition HERE 

Таким образом, вместо того, чтобы быть определены в функции обратного вызова после того, как общие (в том числе JQuery) было загружено, его загружен после выполнения запроса, но до того, как обратный вызов выполняется.

Мой вопрос: почему это происходит там, а не внутри обратного вызова (где оно загружается в неоптимизированной версии). Я попробовал несколько опций в файле build.js и файле конфигурации, и мне кажется, что отсутствует ключевая концепция или небольшая ошибка.

Извините за очень длинный вопрос, но я чувствовал, что вся информация необходима. Если вам нужна дополнительная информация, я могу опубликовать ее или избавиться от чего-то лишнего.

Answer 1

Пожалуйста, смотрите на очень простом примере, использование которого требует JS http://jsfiddle.net/wAM3h/

require({ 
    paths: { 
     jquery: "//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min", 
     hchart: [ 
      "http://code.highcharts.com/highcharts", 
      "http://code.highcharts.com/highcharts-more", 
      "http://code.highcharts.com/modules/exporting" 
     ] 
    } 
}, 
['jquery', 'hchart'], function($, hc) { 

    window.chart = new Highcharts.Chart(options); 
    }); 

Answer 2

Не уверен, что вы все еще участвует в проекте или нет:

Я вижу, что ты не определен path в библиотеку highcharts в коде выше. Я не мог видеть это даже в репо, о котором вы говорили.

И, опять же, highcharts предотвращает повторное декларирование этого пространства имен, так что вы должны использовать другое имя - Следовательно, вы должны использовать другое имя, а регулировочная прокладка-Ming это

Примечание: Библиотеки как highcharts можно безопасно использовать в модуле amd без использования прокладки (если вам не нужен явный доступ к экспортированному им объекту).

Итак, ваш Config File должен выглядеть следующим образом:

requirejs.config({ 
    baseUrl: 'js/lib', 
    paths: { 
     app: '../app', 
     'highstock-custom-name': 'path/to/highcharts.js' 
    }, 
    shim: { 
     "highstock-custom-name": { 
      ... //as is, although not necessary 
     } 
    } 
});