Question

我在.net核心应用程序中使用Typescript，并且正在使用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

编辑：这是调试器的两个屏幕截图（“网络”标签）-也许有帮助。

抛出异常时：

http://accord-framework.net/docs/html/T_Accord_Statistics_Testing_ShapiroWilkTest.htm

正常运行时：

Answer 1

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

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

只有当所有依赖此配置的代码都通过传递给data-main的同一文件加载时，使用data-main加载配置才是安全的。这可能是因为您建立了一个包含应用程序所有模块以及配置[...]
的捆绑软件

发件人：RequireJS sometimes fails to load jQuery

推荐的解决方案：

<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>

分别（按顺序）加载脚本应确保在页面加载时正确满足所有依赖性。

Answer 2

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

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

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

垫片配置

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

更新1：当我使用 shim 时，有时它无法正常工作，然后我使用require来解决该问题。您可以将jquery转换为require脚本

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

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

更新：超出了答案的范围，我需要更多信息，例如您能否将微小的代码发布到 https://jsfiddle.net/

需要jQuery时，RequireJS偶尔会引发异常

2 个答案: