RequireJS随机加载错误的文件名与AMD模块

RequireJS randomly loads wrong filename with AMD modules

本文关键字：AMD 模块文件名随机加载错误 RequireJS 更新时间：2023-09-26

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

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是一个共享配置。我有几个页面都使用相同的设置，我不想在我的项目中到处修改特定于版本的文件名。/编辑

和包含在页面中的

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

add-report.js包含为:

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

编辑这似乎就是原因。内联脚本有时在main之前运行，因此它期望找到的别名没有定义，所以它只是寻找.js。/编辑

jquery。tokeninput是AFAIK，我使用的唯一非amd模块。一个工作请求会产生以下请求序列(Fiddler捕获):

require.js
main.js
视图/add-report.js
视图/add-report-wizard-model.js
knockout-2.2.0
jquery-1.8.3.min.js
视图/add-report-wizard-model-parameter.js
视图/add-report-wizard-model-step.js
knockout.mapping-latest.js

一个不工作的请求有一个序列，例如:

require.js
视图/add-report.js
main.js
视图/add-report-wizard-model.js
knockout.js
jquery.js
视图/add-report-wizard-model-step.js
视图/add-report-wizard-model-parameter.js
knockout.mapping-latest.js

add-report.js:

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

注意，在非工作序列中，add-report.js在 require.js之前被请求(我期望在 require.js加载之后应用的非确定性加载顺序)，并且knockout和jquery(都具有内置的AMD支持)都被请求错误的文件名。我观察到在add-report和knockout和jquery文件名之前请求require的其他序列仍然是错误的。我在请求之间做的唯一一件事就是刷新浏览器(我还会注意到，一旦它工作了，它就会继续工作，一旦它坏了，它就会一直坏下去)。我试过从配置中删除urlArgs，仍然观察到同样的问题。在这个特定的页面上，使用jquery。没有使用Tokeninput。从配置文件中删除它似乎也没有任何效果。

在这一点上，RequireJS对我来说是完全不可靠的，我当然不能在当前状态下将我的代码发布到生产环境中。考虑到很多人似乎都很成功地使用了RequireJS，我只能假设问题出在我的代码的某个地方，但是我不知道问题出在哪里。谁有任何建议，我可能做错了什么?谢谢。

编辑:按要求，摘自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 = {});
}

当您像这样请求您的文件时:

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

机会是内联的要求是在main.js脚本之前调用(如果我理解正确，在哪里是你的配置)。

所以你都需要从main.js文件加载。您可以使用config deps选项来加载一些文件。或者您也可以将它们都包含在内联中，但这就违背了目的。

这是我现在正在工作的(谢谢Simon)。

tl;dr version:在

的global require var中创建config，然后像往常一样包含特定页面的模块/require.js。

main.js:

var require = {
    baseUrl: '/Scripts',
    paths: {
        jquery: 'jquery-1.8.3.min',
        knockout: 'knockout-2.2.0',
        komapping: 'knockout.mapping-latest',
        token: 'jquery.tokeninput'
    },
    shim: {
        'token': ['jquery']
    }
};

AddReport:

<head>
    ...
    <script src="/Scripts/main.js" type="text/javascript"></script>
</head>
<body>
    ...
    <script src="/Scripts/require.js" data-main="Views/add-report.js"></script>