RequireJS 在需要 jquery 时偶尔会抛出异常

Question

我在我的 .net 核心应用程序中使用打字稿，我正在使用 requirejs 管理我的脚本。

所以我的页脚中有一个按钮，单击它时，它会调用我的 .net 核心操作，接收数据并在表面上显示结果。

_Layout.cshtml

<div class="fixed-bottom">
    <footer>
        <a id="debug_button" title="Show/hide debugging">
            <span class="fas fa-code"></span>
        </a>

    </footer>
</div>

<script src="~/lib/requirejs/require.js" data-main="/js/config"></script>

<script>
    require(['../ts/debugarea'],
        function(debugarea) {
            debugarea.buildDebugArea(false);

            $("#debug_button").click(function() {
                debugarea.buildDebugArea(true);
            });
        });
</script>

js/config.js

require.config({
    paths: {
        jquery: "../lib/jquery/dist/jquery",
        bootstrap: "../lib/bootstrap/dist/js/bootstrap",
        backbone: "../lib/backbone/backbone",
        underscore: "../lib/underscore/underscore",
        modernizr: "../lib/modernizr/src/Modernizr",
        unobtrusiveajax: "../lib/Microsoft.jQuery.Unobtrusive.Ajax/jquery.unobtrusive-ajax.min",
        CookieMonster: "../ts/http/CookieMonster",
        debugarea: "../ts/debugarea",
        signalr: "../lib/signalr/dist/browser/signalr"
    },
    shim: {
        backbone: ["jquery", "underscore"],
        bootstrap: ["jquery"],
        Modernizr: {
            exports: 'Modernizr',
        },
        unobtrusiveajax: ["jquery"],
        debugarea:['jquery']
    }
});

和debugarea.ts

import * as $ from "jquery";

console.log("debugarea");
console.log($);

export function buildDebugArea(switchCookie): void {
    let currentCookieValue: string = CookieMonster.CookieMonster.getCookie('debugarea');

    if (switchCookie) {
        if (currentCookieValue === "")
            CookieMonster.CookieMonster.setCookie('debugarea', "true", 1);
        else
            return clearDebugArea();
    } else if (currentCookieValue === "")
        return clearDebugArea();

    $('#debuginfo').append($('<div id="cookieinfo"></div>'));

    getCookies();
    let debugbuttonIcon: JQuery<HTMLElement> = $('#debug_button > span');
    if (debugbuttonIcon.length == 0) return;

    debugbuttonIcon.addClass("bg-dark text-white");
}

90% 有效，我的 debugarea.ts 控制台输出是

debugarea.ts:3 debugarea
debugarea.ts:4 ƒ ( selector, context ) {

        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery…

偶尔，在重新加载浏览器选项卡时，我会在此处收到以下错误：

require.js:1961 GET http://localhost:58006/js/jquery.js 404 (Not Found)
require.js:168 Uncaught Error: Script error for "jquery", needed by: ../ts/debugarea
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:168)
    at HTMLScriptElement.onScriptError (require.js:1738)

下次重新加载时，它又起作用了。知道这里出了什么问题吗？我错过了什么吗？

我正在使用 jQuery 3.1.1 和 RequireJS 2.3.5

编辑：这里是调试器（网络选项卡）的两个屏幕截图 - 也许它有帮助。

当它抛出异常时：

当它正常工作时：

Answer 1

我认为您需要 脚本路径 而不是地图中的名称，然后 jquery 在脚本调用之前未加载。

<script>
    require(['debugarea'],
        function(debugarea) {
            debugarea.buildDebugArea(false);

            $("#debug_button").click(function() {
                debugarea.buildDebugArea(true);
            });
        });
</script>

垫片配置

shim: {
        ...
        '../ts/debugarea': {
             'deps': ['jquery']
        }
    }

更新一：当我使用 shim 时，有时它不能正常工作，然后我使用 require 来解决这个问题。你可以 require jquery 到 require script

<script>
        require(['jquery','debugarea'],
            function($, debugarea) {
                debugarea.buildDebugArea(false);

                $("#debug_button").click(function() {
                    debugarea.buildDebugArea(true);
                });
            });
    </script>

更新：超出了答案的范围，我需要更多信息，比如你可以 post 小代码到 https://jsfiddle.net/

Answer 2

<script src="~/lib/requirejs/require.js" data-main="/js/config"></script>

我相信你的问题就在这里。您正在指定 data-main 来加载 require.js，从而导致您的脚本异步加载。由于此脚本有时可能会乱序加载，因此其他脚本可能会在它之前或之后加载，这可能会破坏依赖关系。

Using data-main to load configuration is safe only when all the code that depends on this configuration is loaded through the same file you pass to data-main. This could be because you've built a bundle that contains all the modules of your app plus the configuration [...]

发件人：

推荐的解决方案：

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<script src="/js/config"></script>

<script>
require(['../ts/debugarea'],
    function(debugarea) {
        debugarea.buildDebugArea(false);

        $("#debug_button").click(function() {
            debugarea.buildDebugArea(true);
        });
    });
</script>

单独（并按顺序）加载脚本应确保在页面加载时正确满足所有依赖项。

RequireJS 在需要 jquery 时偶尔会抛出异常

RequireJS sporadically throws exceptions when requiring jquery

javascript

jquery

requirejs

typescript