正确的方式加载非AMD兼容的jQuery插件在require.js与jQuery在noConflict模式？
假设我想将jquery与一个使用标准闭包定义的标准的、非启用和启用jquery的插件一起使用：(function($))( $.fn.myplugin = { ... } )(jQuery);和它都位于一个js/libs/jquery/jquery.myplugin.js中。
我使用这个配置：
require.config({
baseUrl: 'js/',
paths: {
'jquery': 'libs/jquery/jquery-noconflict',
'underscore': 'libs/underscore/underscore',
'backbone': 'libs/backbone/backbone',
'jquery-myplugin': 'libs/jquery/jquery.myplugin'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jquery-myplugin': {
deps: ['jquery']
}
});我在jQuery中以无冲突的方式加载libs/jquery/jquery-noconflict.js，因为我不想污染全局命名空间：
define(['libs/jquery'], function () {
return jQuery.noConflict(true);
});我就是这样加载我的主app.js的：
define([
'jquery',
'underscore',
'backbone',
'jquery-myplugin'],
function($, _, Backbone, MyPlugin){
//MyPlugin is always undefined, not even sure if
//I should be passing it here if it only extends jQuery?
});现在，我遇到了一个问题--虽然我可以使用上面定义的所有库而不存在任何问题，但我无法找到正确的shim配置来加载非AMD支持的jquery插件。
我尝试过将jquery-myplugin设置为deps of jquery (以及其他方式)，但我无法让它工作。
下面的场景似乎让我有了问题：
- jQuery在无冲突模式下加载.
- 插件代码运行，扩展上面的jQuery实例。
- 我可以在我的应用程序中使用$，由插件代码扩展，这样就可以使用$.myplugin了。
我曾见过类似的问题浮出水面，但它们都没有真正解决这个问题，只是给出了一些模糊的建议，如“使用shim”……
编辑
我还试着用
"jquery-myplugin": {
deps: ["jquery"],
exports: "jQuery.fn.myplugin"
}虽然插件方法一旦以这种方式加载到AMD模块，我仍然无法访问：$('.class').myplugin()作为默认$ object还没有用myplugin代码进行扩展。
回答 3
Stack Overflow用户
发布于 2013-01-11 18:30:40
使用jQuery.noConflict(true)移除jQuery全局变量。当您的插件加载时，它会尝试访问jQuery，但无法访问，这将导致此失败。
如果您的插件是一个模块，它可以作为依赖项访问jQuery。或者，您可以将jQuery作为全局工具使用。
Stack Overflow用户
发布于 2013-01-12 20:42:43
首先，确保“path/to/jquery”实际上扩展了window.jQuery而不是$。
noConflict()对window.jQuery对象进行了定义，但在一些新浏览器上解除了与window.$的绑定，window.$是为本机document.querySelectorAll函数的别名构建的。
其次，您的myplugin不需要返回自己，因为它不能被自己使用。由于扩展了 jQuery，所以从myplugin调用返回jQuery。
最后，“path/to/jquery”不是模块。这是一个普通的JS文件。有可能RequireJS试图像加载模块一样加载它，却找不到define()调用，这会导致混乱。尝试将".js“文件扩展名添加到对RequireJS的信号引用中，即它需要使用"js!”加载资源的插件。
require.config({
paths: {
"jquery": "path/to/jquery",
"jquery-myplugin": "path/to/jquery-myplugin.js"
},
shim: {
"jquery": {
init: function() {
return window.jQuery.noConflict();
},
"jquery-myplugin": {
deps: ['jquery']
init: function($) {
return $;
},
}
}
});Stack Overflow用户
发布于 2013-05-10 15:16:08
我今天和你有同样的问题。以下是我可以修复的方法：
requirejs.config({
"baseUrl": "js/lib",
"paths": {
"app": "../app"
}
});
// Final version of jQuery with all needed plugins.
define("jquery", ["jquery-core", "myplugin"], function(jqCore) {
return jqCore;
});
// Define core jQuery module.
define("jquery-core", ["jquery-1.9.1.min"], function() {
return jQuery.noConflict(true);
});
// This module exposes jquery module to the global scope and returns previous defined version.
define("jq-global", ["jquery-core"], function(jqCore) {
var tmp = jQuery;
jQuery = jqCore;
return tmp;
});
// Define your plugin here, and don't forget to reset previous jQuery version.
define("myplugin", ["jq-global", "jquery.myplugin"], function(jqGlobal, jqPlugin) {
jQuery = jqGlobal;
});
// Load the main app module to start the app
requirejs(["app/main"]);现在，在我的app/main.js文件中，我可以执行以下操作：
define(["jquery"], function($) {
$('body').myplugin();
});这里的想法是在执行插件代码之前公开jQuery临时。到目前为止，我还没有在需要加载更多模块的更大环境中测试该解决方案，因此我无法保证它将长期工作;)
编辑
这个解决办法行不通！！由于requirejs不按顺序加载脚本，所以插件js文件可能会在jquery之前加载，从而导致执行失败。对此我很抱歉。
如果有人有别的主意..。
https://stackoverflow.com/questions/14189871
复制相似问题
腾讯云开发者
