如果页面上的小部件已经加载 JQuery，RequireJS 不会加载 JQuery

Question

我在使用 requirejs、jquery 和我编写的可嵌入小部件时遇到了一些问题。该小部件通过 javascript（包含 jQuery 的缩小版本）加载。

问题是主机站点正在使用 requirejs 并尝试加载 jquery。不知何故，requirejs 似乎认为 jquery 已经加载（因为加载程序脚本中的缩小版本）并跳过 jquery 的加载。它使用加载程序脚本包含的版本。这将（由于时间问题？）使 bootstrap 的加载失败，因为它找不到 jquery.

我怎样才能让主机站点上的 requirejs 加载 jquery？为什么它会受到我的可嵌入小部件包含的 jquery 版本的影响？

带有reqiurejs的主机站点和加载小部件的脚本：

<body>
    ...
    <script async="" src="http://example.com/WidgetLoaderScript.js"></script>
    ...
    <script src="/Scripts/require.js"></script>
    <script>
        requirejs.config({
            baseUrl: "../../Scripts",
            paths: {
                jquery: "jquery-1.10.2.min",
                bootstrap: "bootstrap.min"
            },
            shim: {
                bootstrap: {
                    deps: ["jquery"]
                }
            }
        });

        require(["jquery", "bootstrap"], function ($) {
            // Do stuff
        });
    </script>
</body>

部分加载脚本：

(function (window, document, undefined) {

    // Load minified version of jQuery
    (function(e,t){var n,r,i ......;

    var $abc = $.noConflict();

    // Use $abc to append widget into host site
    ...
 })(window, document);

Answer 1

Require.js 基本上是一个脚本加载器，所以您为什么不使用它来加载您的小部件。以路径回退部分中的 docs 为例。您还可以为您的插件指定 JQuery 依赖项。

requirejs.config({
    paths: {
        ....(other script definitions).....
        'myWidget': 'http://example.com/WidgetLoaderScript'
    },
    shim: {
       'myWidget': ['jquery']
    }
});

Answer 2

勾选this

(function () {

    var paths = { ... };

    //HANDLE JQUERY IF LOADED ALREADY TO AVOID OVERWRITING EXISTING JQUERY PROPERTIES AND PLUGINS
    //CHECK FOR OLD VERSIONS OF JQUERY
    var oldjQuery = !!(window.jQuery && !!window.jQuery.fn.jquery.match(/^1\.[0-4]/));

    //LOAD JQUERY IF NOT AVAILABLE OR BELOW MIN
    if (!window.jQuery || oldjQuery) {
        paths.jquery = [
            '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
            //If the CDN location fails, load from this location
            'libs/jquery/jquery.min'
        ];
    } else {
        //REGISTER THE CURRENT JQUERY
        define('jquery', [], function () { return window.jQuery; });
    }

    //CONFIGURE REQUIRE JS
    require.config({
        ...
        paths: paths,
        ...
    });

    //START REQUIRE JS
    require([
        'jquery',
        'app'
    ], function ($, App) {
        //HANDLE MULTIPLE JQUERY VERSIONS IF NECESSARY
        if (oldjQuery) $.noConflict(true);

        //INITIALIZE APP
        App.init();
    });
})();

Answer 3

我遇到的问题是由于 jQuery 将自己注册为 AMD 模块，这会扰乱主机站点（如果它使用像 RequireJs 这样的 AMD 加载程序）。所以我不想 jQuery 在我的小部件加载程序脚本中这样做。

我的解决方案如下：

// Set define.amd to false while loading jQuery, so that it won't register itself as an AMD module.
var tempDefineAmd = false;
if (typeof define === "function") {
    tempDefineAmd = define.amd;
    define.amd = false;
}

// Load minified version of jQuery
(function(e,t){var n,r,i ......;

// Done loading jQuery. Restore the value of define.amd for targets sites using an AMD loader
if (typeof define === "function" && tempDefineAmd !== false) {
    define.amd = tempDefineAmd;
}

如果页面上的小部件已经加载 JQuery，RequireJS 不会加载 JQuery

RequireJS doesn't load JQuery if widget on page has loaded JQuery already

javascript

jquery

requirejs