所需的shim shim配置

Question

我使用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'
        }
    }
})

在我的主干视图中，我初始化了jquery-布局插件：

​

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

​

窗格显示正确，但是我不能调整它们的大小。我发现在声明jquery插件时，$.fn.draggable (JQuery UI可拖放小部件)没有被初始化。

这表明小部件可能没有被加载。因此，我检查了合并的源文件，并注意到JQuery插件代码之前出现了jquery UI可拖放小部件代码，这意味着依赖项按正确的顺序插入。在Firebug控制台中打印$.fn.draggable还会显示小部件是可用的，至少在文档准备就绪之后。

jQuery，下划线，主干，jQuery用户界面都是jQuery模块。jquery-布局没有AMD兼容性，因此是shim。这取决于JQuery UI的ui.core和ui.draggable 根据他们的医生。

所有这些听起来都不太抽象，这里是jquery插件的一个演示。

我已经“浪费”了8个多小时试图找出这是徒劳的，任何帮助如何解决这将节省我的一天。最有可能的情况是，这只需要在构建文件中修复我的shim。

Answer 1

我解决了这个问题，使非AMD感知的jquery布局插件AMD兼容。我在构建文件中使用了onBuildWrite优化器的r.js钩子。这样，在非AMD感知插件加载代码之前初始化jQuery UI依赖项ui.draggable：

​

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

​

Answer 2

遵循@Genti的回答并使用最新的jquery，下面的shim为我工作。

  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'
    }
  }