使用 requirejs 中的插件停止全局 jquery答案

【问题标题】：Stop global jquery with plugin in requirejs使用 requirejs 中的插件停止全局 jquery
【发布时间】：2016-01-25 21:24:53
【问题描述】：

我在下面有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"));
});

【问题讨论】：

标签： jquery jquery-plugins global-variables requirejs

【解决方案1】：

jquery 和 jquery-cookie 都是 AMD 兼容的，所以不需要做任何 shim 配置。只要您定义了一个名为“jquery”的路径（您这样做），jquery-cookie 模块将需要它并在没有全局 $ 的情况下很好地加载依赖项。请参阅jquery-cookie source code 中的这一行，它在其中查找名为“jquery”的模块：

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

正如您在原始示例中所示，您可以将 jQuery 包装为 nc-query 以消除全局 $.您可能需要做的另一件事是为您想要自动使用它的任何库创建一个“地图”条目。

因此，您的示例的修改版本将如下所示：

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' 代替。您可以根据需要为想要以这种方式工作的任何库创建任意数量的这些。请参阅API docs for map。

【讨论】：

如果你在一个页面上运行它并去控制台检查$的值它是jQuery。所以上面的代码是把 jQuery 设置为全局的。
感谢分享我不知道的地图功能。不幸的是，这不起作用这里是错误gist.github.com/reggi/5239499
@ThomasReggi 什么版本的 jQuery 和 jQuery-UI？您可以将当前版本发布为 JSFiddle 或 gist 吗？
这里是github.com/reggi/jquery-requirejs我希望你已经安装了凉亭XD
@ThomasReggi 我下载了您的示例项目，它对我来说运行良好。您能否重新发布您遇到的错误（上面要点中的行号似乎与您发布的示例项目不对应）

【解决方案2】：

我发现这行得通，我只是不认为这是最好的解决方案。

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

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

【讨论】：