requirejs - 垫片配置
requirejs - shim configuration
我正在使用 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 widget) 在声明 jquery-layout 插件时没有被初始化。
这表示可能没有加载小部件。所以我检查了组合源文件并注意到 JQuery UI 可拖动小部件代码出现在 jquery-layout 插件代码之前,这意味着依赖项以正确的顺序插入。在 Firebug 控制台中打印 $.fn.draggable
也表明小部件可用,至少在文档准备好之后。
jQuery、下划线、backbone、jQueryUI都是AMD模块。 jquery-layout 没有 AMD 兼容性,因此 shim 配置。这取决于 JQuery UI 的 ui.core 和 ui.draggable per their docs.
为了让所有这些听起来不太抽象,here 是 jquery-layout 插件的演示。
我花了 "wasted" 超过 8 个小时试图解决这个问题,但没有成功,任何关于如何解决这个问题的帮助都会节省我的时间。这很可能只涉及构建文件中我的 shim 配置的一些修复。
我通过使非 AMD 感知 jquery-layout 插件与 AMD 兼容解决了这个问题。我在构建文件中使用了 r.js 优化器的 onBuildWrite
钩子。这样 jQuery UI 依赖项 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;
}
})
根据@Genti 的回答并使用最新的 jquery-ui,following 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'
}
}
我正在使用 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 widget) 在声明 jquery-layout 插件时没有被初始化。
这表示可能没有加载小部件。所以我检查了组合源文件并注意到 JQuery UI 可拖动小部件代码出现在 jquery-layout 插件代码之前,这意味着依赖项以正确的顺序插入。在 Firebug 控制台中打印 $.fn.draggable
也表明小部件可用,至少在文档准备好之后。
jQuery、下划线、backbone、jQueryUI都是AMD模块。 jquery-layout 没有 AMD 兼容性,因此 shim 配置。这取决于 JQuery UI 的 ui.core 和 ui.draggable per their docs.
为了让所有这些听起来不太抽象,here 是 jquery-layout 插件的演示。
我花了 "wasted" 超过 8 个小时试图解决这个问题,但没有成功,任何关于如何解决这个问题的帮助都会节省我的时间。这很可能只涉及构建文件中我的 shim 配置的一些修复。
我通过使非 AMD 感知 jquery-layout 插件与 AMD 兼容解决了这个问题。我在构建文件中使用了 r.js 优化器的 onBuildWrite
钩子。这样 jQuery UI 依赖项 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;
}
})
根据@Genti 的回答并使用最新的 jquery-ui,following 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'
}
}