RequireJS在加载所需模块之前不运行数据主脚本 [英] RequireJS does not run data-main script before loading required modules

问题描述

我的项目包括以下文件：

./index.html
./js/main.js
./js/vendor/require.js
./js/viewmodel/vm.js

index.html具有以下相关代码段：

<script data-main="js/main.js" src="js/vendor/require.js"></script>
<script type="text/javascript">
    require(['viewmodel/vm', 'ko'], 
        function(viewmodel, ko) {
            ko.applyBindings(viewmodel);
        }
    );
</script>

js/main.js文件如下：

var root = this;
define('jquery', ['http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js'], function () { return root.$; });
define('ko', ['http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'], function (ko) { return ko; });

js/viewmodel/vm.js文件.

define(['jquery', 'ko'], 
    function($, ko) {
        return {
            subject: 'world',
            greeting: 'hello'
        }
    }
);

当您打开浏览器访问index.html时，浏览器会尝试加载名为js/ko.js的文件，而不是使用main.js中定义的模块。似乎不能保证data-main属性所指向的js文件在依赖项解析之前运行。这在我看来是不正确的，因为主要数据js文件的一个目的是定义所需的配置(即路径、填充程序等)。我使用的是Required v2.1.2。

如果我将main.js文件的内容复制到index.html中的脚本挡路中，则可以很好地工作。我说的"完全正常"是指它将KO解析为一个模块，并找到合适的CDN链接来解析KO，而不是尝试下载./js/ko.js。

推荐答案

若要使用data-main属性配置整个应用程序，它必须是所有代码的单个入口点。

您的第二个脚本挡路提供了第二个入口点，从而打破了这一要求。由于这些入口点将彼此独立(且异步)解析，因此您不能依赖其中一个来影响另一个。

若要解决此问题，请以为应用程序提供单个入口点的方式重构代码，并通过此入口点进行配置。

这篇关于RequireJS在加载所需模块之前不运行数据主脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！