requirejs - конфигурация прокладки

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

Мой файл сборки:

({
    name: '../bower_components/almond/almond',
    include: ['main'],
    insertRequire: ['main'],
    baseUrl: 'src',
    optimize: 'uglify2',
    mainConfigFile: 'src/main.js',
    out: 'javascripts/scripts.js',
    preserveLicenseComments: false,
    paths: {
        jquery: '../bower_components/jquery/dist/jquery',
        underscore: '../bower_components/underscore/underscore',
        backbone: '../bower_components/backbone/backbone',
        kineticjs: '../bower_components/kineticjs/kineticjs',
        'jquery-ui': '../bower_components/jquery-ui/ui',
        'jquery.layout': '../bower_components/jquery.layout/dist/jquery.layout-latest'
    },
    shim: {
        'jquery.layout': {
            deps: [
                'jquery-ui/core',
                'jquery-ui/draggable',
                'jquery-ui/effect',
                'jquery-ui/effect-slide'
            ],
            exports: 'jQuery.fn.layout'
        }
    }
})

В моем представлении Backbone я инициализирую плагин jquery-layout:

define(['backbone', 'underscore', 'jquery.layout'], function(Backbone, _) {
	'use strict'

    return Backbone.View.extend({
        el: $('#application'),

        initialize: function() {
            this.$el.layout({
              west: {
                size: '50%',
                closable: false,
                slidable: false,
                resizable: true
              }
            });
        }
    });
});

Панели отображаются правильно, однако я не могу изменить размер ни одной из них. Я обнаружил, что $.fn.draggable (виджет JQuery UI Draggable) не инициализируется во время объявления плагина jquery-layout.

Это указывает на то, что, вероятно, виджет не загружается. Итак, я проверил комбинированный исходный файл и заметил, что код виджета JQuery UI Draggable появляется перед кодом плагина jquery-layout, что означает, что зависимости вставлены в правильном порядке. Печать $.fn.draggable в консоли Firebug также показывает, что виджет доступен, по крайней мере, после того, как документ будет готов.

jQuery, подчеркивание, магистраль, jQuery UI — все это модули AMD. jquery-layout не совместим с AMD, поэтому конфигурация shim. Это зависит от ui.core и ui.draggable пользовательского интерфейса JQuery согласно их документам.

Чтобы все это не звучало слишком абстрактно, здесь приведена демонстрация jquery -макетный плагин.

Я «потратил» более 8 часов, пытаясь понять это напрасно, любая помощь в том, как это исправить, спасла бы мой день. Скорее всего, это потребует лишь некоторого исправления моей конфигурации прокладки в файле сборки.


amd requirejs jquery-ui backbone.js jquery-layout
person Genti Saliu    schedule 18.03.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я решил проблему, сделав плагин jquery-layout, не поддерживающий AMD, совместимым с AMD. Я использовал хук onBuildWrite оптимизатора r.js в файле сборки. Таким образом, зависимость пользовательского интерфейса jQuery ui.draggable инициализируется до загрузки кода плагина, не поддерживающего AMD:

({
	name: '../bower_components/almond/almond',
        include: ['main'],
        insertRequire: ['main'],
	baseUrl: 'src',
	optimize: 'uglify2',
	mainConfigFile: 'src/main.js',
	out: 'javascripts/scripts.js',
	preserveLicenseComments: false,
	paths: {
		jquery: '../bower_components/jquery/dist/jquery',
		underscore: '../bower_components/underscore/underscore',
		backbone: '../bower_components/backbone/backbone',
		kineticjs: '../bower_components/kineticjs/kineticjs',
		'jquery-ui': '../bower_components/jquery-ui/ui',
		'jquery.layout': '../bower_components/jquery.layout/dist/jquery.layout-latest'
	},
	shim: {
		'jquery.layout': {
			deps: ['jquery', 'jquery-ui/draggable', 'jquery-ui/effect', 'jquery-ui/effect-slide'],
			exports: 'jQuery.fn.layout'
		}
	},
	onBuildWrite: function(moduleName, path, contents) {
		if (moduleName == 'jquery.layout') {
			contents = "define('jquery.layout', ['jquery', 'jquery-ui/draggable', 'jquery-ui/effect', 'jquery-ui/effect-slide'], function(jQuery) {" + contents + "});";
		}
		return contents;
	}
})

person Genti Saliu    schedule 19.03.2015
comment
Таким образом, зависимость пользовательского интерфейса jQuery ui.draggable инициализируется до загрузки кода плагина, не поддерживающего AMD. Ну, это именно то, что ваша shim конфигурация в вашем вопросе должна делать. С информацией, которую вы предоставляете в вопросе и в ответе, нет ничего, что указывало бы на то, почему shim не должно давать вам желаемых результатов. (У вас есть этот shim в вашей конфигурации времени выполнения тоже, верно?) - person Louis; 19.03.2015
comment
Прокладка определяет зависимости и порядок их включения в окончательный сценарий. Это всегда работало. Плагин, не поддерживающий AMD, ссылается на $.fn.draggable во время синтаксического анализа (см. строку 302 в исходном коде: github.com/allpro/layout/blob/master/source/stable/), в это время $.fn.draggable недоступен, поскольку плагин пользовательского интерфейса jQuery не был инициализирован. все же. Что такое конфигурация времени выполнения? Я объединяю файлы в большой скрипт и просто использую этот скрипт, даже в разработке. Gulp watch запускает оптимизатор r.js, когда я изменяю файлы JS. - person Genti Saliu; 19.03.2015

arrow_upward
0
arrow_downward

Следуя ответу @Genti и используя последнюю версию jquery-ui, у меня сработала следующая прокладка.

  shim: {
    'jquery.layout': {
      deps: ['jquery', 'jquery-ui/core', 'jquery-ui/widgets/draggable', 'jquery-ui/effect', 'jquery-ui/effects/effect-slide', 'jquery-ui/effects/effect-drop', 'jquery-ui/effects/effect-scale'],
      exports: 'jQuery.fn.layout'
    }
  }
person django    schedule 29.09.2016
comment
И что мы узнаем из этого ответа, чего еще не узнали из другого? - person Louis; 29.09.2016
comment
не так много, но правильные имена зависимостей пользовательского интерфейса в соответствии с новым пользовательским интерфейсом - person django; 29.09.2016