javascript 如何使用 require.js 在 noConflict 的情况下加载 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15901731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How use require.js to load jQuery with noConflict
提问by mrok
I am trying to load jquery in noConflict mode by using require
我正在尝试使用 require 在 noConflict 模式下加载 jquery
require.config({
paths: {
'jquery': 'libs/jquery-req',
underscore: 'libs/underscore',
backbone: 'libs/backbone'
},
shim: {
jquery: {
init: function() {
console.log('jq init');
var jq = this.jQuery.noConflict(true);
jq.support.cors = true;
return jq;
},
exports: '$'
},
backbone: {
deps: ['underscore', 'jquery'],
init: function() {
console.log('b init');
},
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
and use it like that:
并像这样使用它：
define([
'jquery',
'underscore',
'backbone'
], function(jq, _, Backbone) {
console.log(jq);
var initialize = function() {
// Router.initialize();
};
return {
initialize: initialize
};
});
unfortunately it seems shim.jquery.init function is never called. Can someone try to help me understand why? What is strange when I rename jquery -> jquery-reg then it seems to work, but it requires to change dependency defined in every files.
不幸的是，似乎从未调用过 shim.jquery.init 函数。有人可以尝试帮助我理解为什么吗？当我重命名 jquery -> jquery-reg 时有什么奇怪的，那么它似乎可以工作，但它需要更改每个文件中定义的依赖项。
回答by neverfox
Create the following noconflict.js module:
创建以下 noconflict.js 模块：
define(["jquery"], function($) {
//drop the `true` if you want jQuery (but not $) to remain global
return $.noConflict(true);
});
Then, in your require.config add:
然后，在你的 require.config 添加：
map: {
"*": {
"jquery": "noconflict"
},
"noconflict": {
"jquery": "jquery"
}
}
The noconflict version of jQuery will be handed to all modules (except noconflict). Get rid of the jQuery shim.
jQuery 的 noconflict 版本将交给所有模块（除了 noconflict）。摆脱 jQuery 垫片。
Please note that going the path of keeping jQuery out of the global namespace will prevent you from using any jQuery plugins that are non-AMD without modifying those plugins to be AMD modules. Shim doesn't do anything magical to take advantage of this setup. The same goes for any non-AMD module you might want to shim that depends on something you've made "pure" AMD.
请注意，将 jQuery 排除在全局命名空间之外的路径将阻止您使用任何非 AMD 的 jQuery 插件，而无需将这些插件修改为 AMD 模块。Shim 并没有做任何神奇的事情来利用这个设置。对于任何您可能想要填充的非 AMD 模块也是如此，这取决于您制作的“纯”AMD。
回答by Chris Visser
I'm using this one:
我正在使用这个：
require.config({
paths: {
jquery: 'libraries/jquery/jquery.min',
underscore: 'libraries/underscore.min',
backbone: 'libraries/backbone.min',
jquery_ui: 'libraries/jquery/jquery.ui.min',
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'jquery_ui': {
deps: ['underscore', 'jquery'],
exports: 'ui'
}
}
});
Then in my app i use local scopes to define jquery's instance. In the below case $ is jquery, but it can be something else as well.
然后在我的应用程序中，我使用本地范围来定义 jquery 的实例。在下面的情况下，$ 是 jquery，但它也可以是其他东西。
define([
'jquery',
'backbone'
], function ($, Backbone) {
'use strict';
var app = Backbone.View.extend({
el: 'body',
initialize: function() { },
});
return app;
});
