内联需要调用requireJS配置,该调用遵循加载我的应用程序的脚本标记
我正在使用requireJS,我想从中访问一个特定的模块。 不幸的是,我总是收到404消息,说明找不到该模块。
我在路径配置所在的js文件中包含如下:
我的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']); } }); });
现在我的问题是我需要内联设置我的搜索模块,因为我必须在服务器端生成翻译并用它初始化它:
$(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 }); }); });
不幸的是,我收到一条错误消息,指出找不到该文件。 当DOM准备就绪时,我是否应该能够访问requireJS模块? 奇怪的是,所有加载的模块的路径(由于我猜的JS错误,某些模块没有被加载)被正确设置。 只是搜索模块看起来像这样: /js/shop2/springen/Search.js 404 (Not Found)
任何建议我做错了什么?
编辑
我在我的内联javascript前面记录了以下内容: console.log(typeof require);
它返回我的function
所以需要加载但路径没有设置..为什么?
您正在做的事情无法 可靠地工作,因为您异步加载RequireJS配置并且您具有依赖于此配置的同步代码。
这是发生的事情:
-
这一行:
导致RequireJS被加载并导致RequireJS为
/js/shop2/springen/app
模块安排异步加载。此元素上的
async
属性使得浏览器有权异步加载RequireJS。 如果它确实异步加载RequireJS,这会加剧您遇到的问题,因为当您运行其他元素时,无法确定是否已加载RequireJS。 它可能会也可能不会被加载,具体取决于一系列外部因素。 归结为幸运。 但是,删除它并不是整个解决方案,因为您要求通过
data-main
加载的模块仍然是异步加载的,无论如何。 -
执行此操作时:
没有人知道你的主模块是否已加载,因为(见上文)它是异步加载的。 因此可能确实加载了 RequireJS,但它可能尚未配置 ,因为您的配置位于一个模块中,该模块在运行此脚本时可能会加载也可能不会加载。 这就是为什么
typeof require
是一个函数,但是你在尝试加载依赖于你的配置的模块时会遇到错误。$(document).ready
没有帮助,因为导致$(document).ready
触发的事件可能在RequireJS加载主模块之前发生。
如果你不能把require(['Search']...
代码放在你的主模块中,你可以做的是从/js/shop2/springen/app
删除对requirejs.config
的调用,然后添加一个在加载RequireJS的元素之前的元素:
require = { baseUrl: '/js/shop2/springen/', paths: { 'lodash': 'vendor/lodash.min', ... } });
在加载RequireJS之前将require
变量设置为配置会告诉RequireJS使用此变量的值作为其配置。
并记得从加载RequireJS的中删除该
async
属性。