Question

我正在使用requireJS，我想从中访问特定模块。不幸的是，我总是收到404消息，说明找不到该模块。

我在路径配置中包含我的js文件，如下所示：

<script src="/js/shop2/springen/vendor/require.min.js" data-main="/js/shop2/springen/app" async></script>

我的app.js看起来像这样：

define('jquery', [], function() {
    return jQuery;
});

requirejs.config({
    baseUrl: '/js/shop2/springen/',
    paths: {
        'lodash': 'vendor/lodash.min',  
        'Functions': 'app/modules/functions',
        'Search': 'app/modules/search',
        'Comparison': 'app/modules/comparison',
        'Globals': 'app/globals',
        'Init': 'app/init',
        ...
    }
});

// globals get loaded first and are available to all subordered scripts
require(['Globals', 'lodash'], function () {

    $(document).ready(function() {

        if ($('#comparison').length) {

            require(['Comparison'], function (Comparison) {
                Comparison.init();
            });

        } else {

            require(['Init']);

        }

    });

});

现在我的问题是我需要内联设置我的搜索模块，因为我必须在服务器端生成翻译并用它初始化它：

<script type="text/javascript">
$(document).ready(function(){
    require(['Search'], function () {
        $('#q').shopIncrementalSearch({
            resultsDiv: $('#lifesearch'),
            defaultTitle: 'drücken Sie die Eingabetaste, um',
            defaultText: 'Alle Ergebnisse anzeigen',
            searchingText: 'Suche ...',
            dataUrl: 'http://SRV-CACHE01',
            language: 'de',
            countryId: 1,
            portalId: 22,
            isErpPortal: false,
            sectorId: null
        });
    });
});
</script>

不幸的是，我收到一条错误消息，指出找不到该文件。当DOM准备就绪时，我是否应该能够访问requireJS模块？奇怪的是，所有加载的模块的路径（由于我猜的JS错误，某些模块没有被加载）被正确设置。只是搜索模块如下所示：/js/shop2/springen/Search.js 404 (Not Found) 有什么建议我做错了吗？

修改

我在内联javascript前面记录了以下内容： console.log(typeof require); 并且它返回function，因此加载了需求，但未设置路径..为什么？

Answer 1

您正在做什么无法 可靠地因为您正在异步加载RequireJS配置和您具有依赖于此配置的同步代码。

以下是发生的事情：

这一行：

<script src="/js/shop2/springen/vendor/require.min.js" data-main="/js/shop2/springen/app" async></script>

导致RequireJS被加载并导致RequireJS为/js/shop2/springen/app模块安排异步加载。

此元素的async属性使得浏览器有权异步加载RequireJS。如果它确实异步加载RequireJS，这会加剧您遇到的问题，因为在运行其他<script>元素时，无法确定是否已加载RequireJS。它可能会也可能不会被加载，具体取决于一系列外部因素。归结为幸运。但是，删除它并不是整个解决方案，因为您要求通过data-main加载的模块仍然异步加载，无论如何。

执行此操作时：

<script type="text/javascript"> $(document).ready(function(){ require(['Search'], function () { ... }); }); </script>

无法确定您的主模块是否已加载，因为（见上文）它是异步加载的。因此，RequireJS可能确实是已加载但它可能尚未已配置，因为您的配置位于一个模块中，该模块在此脚本出现时可能会加载也可能不加载跑。这就是为什么typeof require是一个函数，但是在尝试加载依赖于您的配置的模块时会出错。

$(document).ready无效，因为导致$(document).ready触发的事件可能会在RequireJS加载主模块之前发生。

如果您无法将require(['Search']...代码放入主模块中，您可以执行的操作是从requirejs.config移除对/js/shop2/springen/app的调用，然后添加<script>元素就在加载RequireJS的那个之前：

require = { baseUrl: '/js/shop2/springen/', paths: { 'lodash': 'vendor/lodash.min', ... } });

在加载RequireJS之前将require variable设置为配置会告诉RequireJS使用此变量的值作为其配置。

请记住从加载RequireJS的async中删除<script>属性。

内联需要调用requireJS配置，该调用遵循加载我的应用程序的脚本标记

1 个答案: