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

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配置,并且您具有依赖于此配置的同步代码.

这是发生的事情:

1. 这一行:

   <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是异步加载的,无论如何.

2. 执行此操作时:

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

   没有人知道你的主模块是否已加载,因为(见上文)它是异步加载的.因此可能确实加载了 RequireJS,但它可能尚未配置,因为您的配置位于一个模块中,该模块在运行此脚本时可能会加载也可能不会加载.这就是为什么它typeof require是一个函数但是你在尝试加载依赖于你的配置的模块时会遇到错误.

   $(document).ready没有帮助,因为导致$(document).ready触发的事件可能在RequireJS加载主模块之前发生.

如果你不能把require(['Search']...代码放在你的主模块中,你可以做的是删除对requirejs.configfrom 的调用/js/shop2/springen/app,然后<script>在加载RequireJS的那个元素之前添加一个元素:

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

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

并记住async从<script>加载RequireJS的那个属性中删除该属性.