内联的require调用忽略了RequireJS配置，该调用遵循加载我的应用程序的script标签 [英] RequireJS configuration ignored by inline require calls that follow the script tag that loads my app
问题描述
我正在使用requireJS，我想从中访问特定模块.不幸的是，我总是收到一条404消息，提示找不到该模块.
I'm using requireJS and I'd like to access a specific module from it. Unfortunately I always receive a 404 message that the module wasn't found.
我将我的js文件包括在路径配置中，如下所示:
I include my js file where the path configuration is located like this:
<script src="/js/shop2/springen/vendor/require.min.js" data-main="/js/shop2/springen/app" async></script>
我的app.js看起来像这样:
My app.js looks like this:
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']);
}
});
});
现在，我的问题是，我需要内联设置搜索模块，因为我必须在服务器端生成翻译并使用以下内容对其进行初始化:
Now my problem is that I need to setup my search module inline as I have to generate translations on the server side and initialize it with this:
<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)
有什么建议我做错了吗?
Unfortunately I get an error message saying the file wasn't found. Shouldn't I be able to access the requireJS modules when the DOM's ready? Curiously the path of all loaded modules (some modules don't get loaded due to the JS error I guess) are set correctly. Just the Search module looks like this: /js/shop2/springen/Search.js 404 (Not Found)
Any suggestions what I'm doing wrong?
编辑
我在嵌入式JavaScript之前记录了以下内容:
console.log(typeof require);
它返回了我function，所以require加载了，但是没有设置路径.为什么?
I've logged following in front of my inline javascript:
console.log(typeof require);
and it returns me function so require is loaded but the paths aren't set.. Why?
推荐答案
您正在做的事情 无法可靠地工作 ，因为您正在异步加载RequireJS配置， 您有依赖于此配置的同步代码.
What you are doing cannot work reliably because you are loading your RequireJS configuration asynchronously and you have synchronous code that depends on this configuration.
发生的事情是这样:
-
此行:
This line:
<script src="/js/shop2/springen/vendor/require.min.js" data-main="/js/shop2/springen/app" async></script>
导致RequireJS加载，并导致RequireJS为/js/shop2/springen/app模块安排异步加载.
causes RequireJS to be loaded and causes RequireJS to schedule an asynchronous load for your /js/shop2/springen/app module.
此外，此元素上的async属性使它具有功能，以便授权浏览器异步加载RequireJS.如果确实异步加载RequireJS，这将使您遇到的问题更加复杂，因为到其他<script>元素运行时，还无法确定是否已加载RequireJS.它可能会加载也可能不会加载，具体取决于一系列外部因素.归结为好运.但是，删除它并不是完整的解决方案，因为您要求的模块是通过 data-main加载的是 still 异步加载，无论如何.
The async attribute on this element moreover makes it so that the browser is authorized to load RequireJS asynchronously. If it does load RequireJS asynchronously, this compounds the problem you are experiencing because by the time your other <script> element is run, there's no telling whether RequireJS is loaded. It may or may not be loaded depending on a bunch of external factors. It boils down to luck. Removing it, however, is not the whole solution because the module you ask be loaded through data-main is still loaded asynchronously, no matter what.
执行此操作时:
<script type="text/javascript">
$(document).ready(function(){
require(['Search'], function () {
...
});
});
</script>
无法告知您的主模块是否已加载，因为(参见上文)它是异步加载的.因此RequireJS确实可以被加载，但是可能尚未被配置，因为您的配置位于一个模块中，该脚本在该模块被加载时可能已加载，也可能未加载.跑步.这就是为什么typeof require是一个函数，但是在尝试加载依赖于您的配置的模块时会出现错误的原因.
there is no telling whether your main module has loaded or not, because (see above) it is loaded asynchronously. So RequireJS may indeed be loaded but it may not have yet been configured, because your configuration is located in a module which may or may not be loaded by the time this script is run. This is why typeof require would be a function but you'd get errors trying to load modules that depend on your configuration.
$(document).ready没有帮助，因为导致$(document).ready触发的事件可能在RequireJS加载主模块之前发生.
$(document).ready does not help because the event which causes $(document).ready to fire can happen before RequireJS has loaded the main module.
如果无法在主模块中放置require(['Search']...代码，则可以执行的操作是从/js/shop2/springen/app中删除对requirejs.config的调用，然后在加载RequireJS的元素之前添加一个<script>元素.确实:
If you cannot put the require(['Search']... code in your main module, what you could do is remove the call to requirejs.config from /js/shop2/springen/app, and then add a <script> element just before the one that loads RequireJS that does:
require = {
baseUrl: '/js/shop2/springen/',
paths: {
'lodash': 'vendor/lodash.min',
...
}
});
在加载RequireJS之前，将 require变量设置为配置告诉RequireJS使用此变量的值作为其配置.
Setting a require variable to a configuration before RequireJS is loaded tells RequireJS to use the value of this variable as its configuration.
并记住从加载RequireJS的<script>中删除该async属性.
And remember to remove that async attribute from the <script> that loads RequireJS.
这篇关于内联的require调用忽略了RequireJS配置，该调用遵循加载我的应用程序的script标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
