在requirejs中使用插件停止全局jquery

Question

我让jquery和jquery-cookie在下面正确地一起工作。我想让jquery不是全局的。现在是。我尝试过的任何方法似乎都打破了jquery-cookie。

require.config({
    paths: {
        "jquery": '../components/jquery/jquery',
        "jquery-cookie": "../components/jquery-cookie/jquery.cookie",
    },
    shim: {
        "jquery-cookie": {
            deps: ['jquery']
        }
    }
});
require(["jquery", "jquery-cookie"], function($) {
    console.log($().jquery); // 1.7.2
    console.log($.cookie("hello")); // null
});

以下更改将使jquery本地化并破坏cookie:

define("nc-jquery",['jquery'], function () {
    return jQuery.noConflict(true);
});
require(["nc-jquery", "jquery-cookie"], function($) {
    console.log($().jquery);
    console.log($.cookie("hello"));
});

Answer 1

jquery和jquery-cookie都是AMD兼容的，所以不需要做任何配置。只要你定义了一个名为"jquery"的路径(你确实这么做了)，jquery-cookie模块就会需要它，并在没有全局$的情况下加载依赖项。查看jquery-cookie源代码中的这一行，它查找一个名为"jquery"的模块:

if (typeof define === 'function' && define.amd) {
    // AMD. Register as anonymous module.
    define(['jquery'], factory);

正如您在原始示例中所展示的那样，您可以将jQuery包装为nc-query以消除全局$。您可能需要做的另一件事是为您想要自动使用的库创建一个"map"条目。

那么你的例子的修改版本看起来像这样:

require.config({
    paths: {
        'jquery': '../components/jquery/jquery',
        'jquery-cookie': '../components/jquery-cookie/jquery.cookie'
    },
    map: {
        'jquery-cookie': { 'jquery': 'nc-jquery' }
    }
});
define('nc-jquery', ['jquery'], function (jq) {
    return jq.noConflict( true );
});
require(['nc-jquery', 'jquery-cookie'], function(myNonGlobaljQuery) {
    console.log(myNonGlobaljQuery().jquery);
    console.log(myNonGlobaljQuery.cookie("hello"));
});

这意味着当jquery-cookie请求'jquery'时，你给它'nc-jquery'代替。您可以根据需要为任何库创建尽可能多的此类库。

Answer 2

我发现这是有效的，我只是不认为这是最好的解决方案。

require(["jquery", "jquery-cookie"], function() {
    var $ = jQuery.noConflict(true);
    console.log($().jquery);
    console.log($.cookie("hello"));
});

我对这段代码及其工作原理的解释如下。jquery-cookie在它的代码中使用$，并且$是全局的，只有足够的时间让jquery和cookie加载。我使用noConflict将其本地化，允许在此要求中使用$。