Question

我正在开发一个多页面的应用程序，使用requirejs来管理我的javascript库/依赖项。我的想法是，我将拥有一个包含配置的main.js，然后是需要它的每个页面的.js文件，例如“register.js”

我的require配置位于javascripts/main.js

requirejs.config({
     baseUrl: '/javascripts',
     waitSeconds: 200,
     paths: {
          'async': 'lib/require.async',
          'jquery': 'lib/jquery-1.7.2.min',
          'knockout': 'lib/knockout-3.0.0'
});

我有一个看起来像这样的淘汰视图模型： Java脚本/的ViewModels / userDetailsViewModel.js

define(['knockout'], function(ko) {
    return function() {
        var self = this;

        self.name = ko.observable();
        self.email = ko.observable();
});

我的'入口点'是javascripts / register.js

require(['./main', 'knockout', 'viewModels/userDetailsViewModel'], function(main, ko, userDetailsViewModel) {
    ko.applyBindings(new userDetailsViewModel());
});

在我的register.html页面上，我有这样的脚本参考：

<script data-main="/javascripts/register" src="/javascripts/lib/require.js"></script>

当我的页面加载时，我在控制台中收到这些错误：

获取http://localhost:3000/javascripts/knockout.js 404（未找到）

和

未捕获错误：脚本错误：knockout

我不确定为什么要查找knockout.js - 我已在配置的路径部分指定了淘汰赛，以查看lib / knockout-3.0.0

我的目标结构是：

Javascript角/
我的大多数页面js文件都在这里

Javascript角/的ViewModels
有淘汰视图模型

Javascript角/ lib中 包含knockout，jquery，requirejs等...

Answer 1

问题是RequireJS将在没有配置的情况下执行调用require(['./main', 'knockout', 'viewModels/userDetailsViewModel']。是的，在./main之前列出knockout，但在单 require调用中传递的依赖项之间没有订单保证。 RequireJS可能先加载./main，或先knockout加载./main。即使首先通过此特定调用加载require，我相信它不会对此调用加载的其他模块的加载方式产生任何影响。也就是说，我认为这个require将基于时存在的配置运行，并且由它加载的模块引起的任何配置更改只会生效用于后续 require(['./main', function(main) { require(['knockout', 'viewModels/userDetailsViewModel'], function(ko, userDetailsViewModel) { ko.applyBindings(new userDetailsViewModel()); }); });来电。

有很多方法可以解决这个问题。这应该有效：

data-main

或者您可能希望重新构建文件以及传递给requirejs.config的内容，以便在第一次require来电之前加载<{1}} 和。这是重组的一个例子。将您的切入点更改为/javascripts/main.js：

<script data-main="/javascripts/main.js" src="/javascripts/lib/require.js"></script>

更改/javascripts/main.js，使其包含：

requirejs.config({
     baseUrl: '/javascripts',
     waitSeconds: 200,
     paths: {
          'async': 'lib/require.async',
          'jquery': 'lib/jquery-1.7.2.min',
          'knockout': 'lib/knockout-3.0.0'
});

require(['knockout', 'viewModels/userDetailsViewModel'], function(ko, userDetailsViewModel) {
    ko.applyBindings(new userDetailsViewModel());
});

删除/javascripts/register.js。这将是一种方法。但是，我很难判断这是否是您想要的特定项目，因为我不知道整个项目。对特定项目进行重组的方式实际上取决于其他页面可能使用的是什么，所有页面都有哪些信息，每个页面特有的内容，是否使用模板系统来生成HTML等等。

使用require.js进行淘汰 - 不在我配置的“路径”部分中查找淘汰赛

1 个答案: