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']...代碼的主模塊中，你可以做的是從/js/shop2/springen/app刪除調用requirejs.config，然後只需加載RequireJS，做了一個前添加<script>元素：

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

在加載RequireJS之前將require variable設置爲配置，告訴RequireJS使用此變量的值作爲其配置。

要記住，從加載RequireJS的<script>刪除async屬性。