javascript - 如何在每次需要 jQuery 时将 jQuery 的插件与 jQuery 一起加载？

Question

行 $("body").slimScroll(); 会抛出错误，因为 slimScroll 未定义。这是因为 require.js 可能不会自动加载 shim 键，如果您需要任何模块，则在 shim 中指定为依赖项(我想如果我有 shim jquery.slimscroll 并且它的依赖项是 jquery，那么当我需要 jquery 时，它会自动加载jquery.slimscroll - 这种行为不会发生)。

所以正确的方法是调用 define(['jquery', 'jquery.slimscroll') function ($) ...，所以 require 知道我需要 jquery.slimscroll code> 并且因为它在 shim 中，所以加载方式会有点不同，因为它不兼容 AMD。

问题是，如果我有很多 jquery 插件，我需要始终传递 define 调用中需要的所有插件。有什么办法，如何解决这种烦人的行为并只编写 define(['jquery'], function ($) ..？

require.config({
    baseUrl: 'js/bower',
    paths: {
        react: 'react/react-with-addons',
        jquery: 'jquery/dist/jquery',
        'jquery-private': '../jquery-private',
        'jquery.slimscroll': 'jquery-slimscroll/jquery.slimscroll.min'
    },
    map: {
        '*': {
            jquery: 'jquery-private',
        },
        'jquery-private': {
                jquery: 'jquery'
        }
    },
    shim: {
        'jquery.slimscroll': ['jquery']
    }

});


require(['jquery'], function ($) {

    $("body").slimScroll();

});

Answer 1

您可以将 jquery 插件添加到 jquery-private 模块的依赖项中。

define(['jquery', 'jquery.slimscroll', ...], function (jQuery) {
    return jQuery.noConflict(true);
});

这样，当任何模块需要 jquery 时，插件也会同时加载。

我假设jquery-private旨在加载jQuery，这样它就不会与其他版本的jQuery发生冲突。这就是我上面的示例所反射(reflect)的内容，但模块实际执行的操作通常并不重要。

使用此方法，您仍然需要为每个非 AMD 模块的插件进行 shim 配置。此外，您的插件必须像 jquery-private 一样获取 map 设置才能获取真正的 jquery 模块。否则会出现循环依赖。