Javascript 如何使用 requirejs 使 jQuery 插件可加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10918063/
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 to make a jQuery plugin loadable with requirejs
提问by Nicola Peluchetti
I'm working with requirejs+jquery and i was wondering if there was a smart way to make a jQuery plugin work well with require.
我正在使用 requirejs+jquery，我想知道是否有一种聪明的方法可以让 jQuery 插件与 require 一起工作。
For example i'm using jQuery-cookie. If i understood correctly i can create a file called jquery-cookie.js and inside do
例如，我正在使用 jQuery-cookie。如果我理解正确，我可以创建一个名为 jquery-cookie.js 的文件，然后在里面做
define(["jquery"], // Require jquery
function($){
// Put here the plugin code.
// No need to return anything as we are augmenting the jQuery object
});
requirejs.config( {
"shim": {
"jquery-cookie" : ["jquery"]
}
} );
i wondered if i could do things like jQuery does, which is like this:
我想知道我是否可以做像 jQuery 那样的事情，就像这样：
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
or if this is the only way to make jQuery plugins compatible with requirejs or any amd
或者如果这是使 jQuery 插件与 requirejs 或任何 amd 兼容的唯一方法
采纳答案by Hans
You only need to do EITHER
你只需要做任何一个
define(["jquery"], // Require jquery
function($){
// Put here the plugin code.
// No need to return anything as we are augmenting the jQuery object
});
at the end of jquery-cookie.js, OR
在 jquery-cookie.js 的末尾，或
requirejs.config( {
"shim": {
"jquery-cookie" : ["jquery"]
}
} );
anywhere before you include jquery-cookie (like wherever data-main points to, for instance).
在包含 jquery-cookie 之前的任何地方（例如 data-main 指向的任何地方）。
The last code block you've posted is good for things like jQuery which get redistributed and may or may not be in an AMD environment. Ideally every jQuery plugin would have that set up already.
您发布的最后一个代码块适用于像 jQuery 这样重新分发并且可能在也可能不在 AMD 环境中的东西。理想情况下，每个 jQuery 插件都已经设置好了。
I prefer to keep included libraries as unadulterated as possible, so the global shim config once per page seems like the cleanest solution to me. That way upgrades are safer and CDNs become a possibility.
我更喜欢保持包含的库尽可能纯粹，所以每页一次全局垫片配置对我来说似乎是最干净的解决方案。这样升级更安全，CDN 成为可能。
回答by Carl Raymond
There are some caveats with using shim configuration in RequireJS, pointed out on http://requirejs.org/docs/api.html#config-shim. Namely, "Do not mix CDN loading with shim config in a build" when you're using the optimizer.
在 RequireJS 中使用 shim 配置有一些注意事项，在http://requirejs.org/docs/api.html#config-shim上指出。即，当您使用优化器时，“不要在构建中混合 CDN 加载和 shim 配置”。
I was looking for a way to use the same jQuery plugin code on sites both with and without RequireJS. I found this snippet for jQuery plugins at https://github.com/umdjs/umd/blob/master/jqueryPlugin.js. You wrap your plugin in this code, and it will work properly either way.
我一直在寻找一种方法，可以在有和没有 RequireJS 的网站上使用相同的 jQuery 插件代码。我在https://github.com/umdjs/umd/blob/master/jqueryPlugin.js找到了 jQuery 插件的这个片段。您将插件包装在此代码中，无论哪种方式它都可以正常工作。
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module depending on jQuery.
define(['jquery'], factory);
} else {
// No AMD. Register plugin with global jQuery object.
factory(jQuery);
}
}(function ($) {
$.fn.yourjQueryPlugin = function () {
// Put your plugin code here
};
}));
Credit goes to jrburke; like so much javascript, it's functions inside functions acting on other functions. But I think I have unpacked what it's doing.
归功于 jrburke；像很多 javascript 一样，它的函数内部的函数作用于其他函数。但我想我已经解开了它在做什么。
The function argument factoryin the first line is itself a function which is invoked to define the plugin on the $argument. When no AMD-compatible loader is present, it's invoked directly to define the plugin on the global jQueryobject. That's just like the common plugin definition idiom:
factory第一行中的函数参数本身就是一个函数，它被调用以在$参数上定义插件。当不存在与 AMD 兼容的加载程序时，它会被直接调用以在全局jQuery对象上定义插件。这就像常见的插件定义习惯用法：
function($)
{
$.fn.yourjQueryPlugin = function() {
// Plugin code here
};
}(jQuery);
If there is a module loader, then factoryis registered as the callback for the loader to invoke after loading jQuery. The loaded copy of jQuery is the argument. It's equivalent to
如果有模块加载器，则factory注册为加载器在加载 jQuery 后调用的回调。jQuery 的加载副本是参数。它相当于
define(['jquery'], function($) {
$.fn.yourjQueryPlugin = function() {
// Plugin code here
};
})
回答by TPEACHES
Just as an FYI to all some of the jquery plugins already use amd/require so you dont need to declare anything in the shim. In fact doing so might cause problems for you in some cases.
就像所有已经使用 amd/require 的 jquery 插件的仅供参考，因此您不需要在 shim 中声明任何内容。事实上，在某些情况下，这样做可能会给您带来问题。
If you look in the jquery cookie JS you will see define calls and require(["jquery"]).
如果您查看 jquery cookie JS，您将看到定义调用和 require(["jquery"])。
and in jquery.js you will see a call to define("jquery",[],function()...
在 jquery.js 中，您将看到调用 define("jquery",[],function()...
