RequireJS使用AMD模块随机加载错误的文件名 [英] RequireJS randomly loads wrong filename with AMD modules

问题描述

我的配置(main.js)定义为:

I have my config (main.js) defined as:

require.config({
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        jquery: 'jquery-1.8.3.min',
        knockout: 'knockout-2.2.0',
        komapping: 'knockout.mapping-latest',
        token: 'jquery.tokeninput'
    },
    shim: {
        'token': ['jquery']
    }
});

编辑 main.js是共享配置.我有几个页面都使用相同的设置，并且我不需要在项目的各处修改版本特定的文件名. /EDIT

EDIT main.js is a shared configuration. I have several pages that all use the same setup and I don't want to need to modify version-specific filenames all over the place in my project. /EDIT

，并在页面中显示为:

<script src="/AnswersDev/Scripts/require.js" data-main="/AnswersDev/Scripts/main"></script>

add-report.js包含为:

add-report.js is included as:

<script type="text/javascript">
    require(['Views/add-report']);
</script>

编辑 看来这可能是原因.内联脚本有时在main之前运行，因此未定义期望找到的别名，因此它只是在寻找.js. /EDIT

EDIT That appears likely to be the cause. The inline script is sometimes running before main, and therefore the aliases it is expecting to find are not defined, so it just goes looking for .js. /EDIT

jquery.tokeninput是AFAIK，我正在使用的唯一非AMD模块.一个有效的请求导致以下请求顺序(Fiddler捕获):

jquery.tokeninput is AFAIK, the only non-AMD module I'm using. A working request results in the following sequence of request (Fiddler capture):

1. require.js
2. main.js
3. Views/add-report.js
4. Views/add-report-wizard-model.js
5. 淘汰赛2.2.0
6. jquery-1.8.3.min.js
7. 视图/add-report-wizard-model-parameter.js
8. 视图/add-report-wizard-model-step.js
9. knockout.mapping-latest.js

无效的请求具有类似以下的序列:

A non-working request has a sequence like e.g.:

1. require.js
2. Views/add-report.js
3. main.js
4. 视图/add-report-wizard-model.js
5. knockout.js
6. jquery.js
7. 视图/add-report-wizard-model-step.js
8. 视图/add-report-wizard-model-parameter.js
9. knockout.mapping-latest.js

1. require.js
2. Views/add-report.js
3. main.js
4. Views/add-report-wizard-model.js
5. knockout.js
6. jquery.js
7. Views/add-report-wizard-model-step.js
8. Views/add-report-wizard-model-parameter.js
9. knockout.mapping-latest.js

add-report.js:

add-report.js:

define(['jquery', 'knockout', 'Views/add-report-wizard-model'], function ($, ko, ViewModel) {
... snip ...
});

请注意，在非工作序列中，在之前 require.js请求add-report.js(我希望在之后要求应用不确定的加载顺序. js已加载)，并且敲除和jquery(都内置了AMD支持)都被要求使用错误的文件名.我观察到在添加报告之前需要require的其他序列，而敲除和jquery文件名仍然是错误的.我在两次请求之间所做的唯一一件事就是刷新浏览器(我还将注意到，一旦运行，它将趋向于保持工作状态，一旦崩溃，将趋于保持崩溃状态).我尝试从配置中删除urlArgs，但仍然观察到相同的问题.在此特定页面上，未使用jquery.tokeninput.从配置文件中删除它似乎也没有任何作用.

Note that in the non-working sequence, add-report.js is requested before require.js (I expected that non-deterministic load order applied after require.js is loaded) and both knockout and jquery (both having AMD support built in) are being requested with the wrong file names. I have observed other sequences where require is requested before add-report and the knockout and jquery file names are still wrong. The only thing I am doing between requests is refreshing the browser (I'll also note that once it works, it tends to keep working, and once it breaks, it tends to stay broken). I've tried removing urlArgs from the config and still observe the same issue. On this particular page, jquery.tokeninput is not used. Removing it from the config file does not appear to have any effect either.

在这一点上，RequireJS对我来说是完全不可靠的，并且我当然不能在当前状态下将代码发布到生产环境中.考虑到似乎相当成功地使用RequireJS的人数，我只能假设问题出在我的代码中，但是我对可能出现的位置不知所措.

At this point, RequireJS is completely unreliable for me and I certainly cannot release my code to production in the current state. Given the number of people who seem to be using RequireJS quite successfully, I can only assume that the problem is in my code somewhere, but I'm at a loss as to where that might be.

有人对我可能出错的地方有什么建议吗?谢谢.

Anyone have any suggestions where I might have gone wrong? Thanks.

根据要求，摘录自剔除.mapping-latest.debug.js:

As requested, excerpt from knockout.mapping-latest.debug.js:

// Module systems magic dance.

if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
    // CommonJS or Node: hard-coded dependency on "knockout"
    factory(require("knockout"), exports);
} else if (typeof define === "function" && define["amd"]) {
    // AMD anonymous module with hard-coded dependency on "knockout"
    define(["knockout", "exports"], factory);
} else {
    // <script> tag: use the global `ko` object, attaching a `mapping` property
    factory(ko, ko.mapping = {});
}

推荐答案

当您请求这样的文件时:

When you request your files like this:

<script src="/AnswersDev/Scripts/require.js" data-main="/AnswersDev/Scripts/main"></script>
<script type="text/javascript">
    require(['Views/add-report']);
</script>

可能是在main.js脚本之前调用了内联require(如果我理解正确的话，您的配置在哪里).

Chances are that the inline require is called before the main.js script (where is your config if I understand correctly).

因此，您都需要从main.js文件加载.您可以使用config deps选项加载某些文件.或者，您也可以将它们全部内联，但这会破坏目的.

So you all need to load from the main.js files. You can use the config deps option to load some files. Or you could also all include them inline, but that defeat the purpose.

这篇关于RequireJS使用AMD模块随机加载错误的文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！