15

我有非常简单的脚本目录结构：

/js/        <-- located in site root
    libs/
        jquery-1.10.1.min.js
        knockout-2.2.1.js
        knockout.mapping.js
    models/
        model-one.js
        model-two.js
        ...
    require.js
    config.js

由于站点引擎使用干净的 URL，因此我在以下位置使用绝对路径<script>：

<script type="text/javascript" data-main="/js/config.js" src="/js/require.js"></script>

RequireJS 配置：

requirejs.config({

    baseUrl: "/js/libs",

    paths: {
        "jquery":       "jquery-1.10.1.min",
        "knockout":     "knockout-2.2.1",
        "komapping":    "knockout.mapping"
    }

});

HTML中的某处：

require(["jquery", "knockout", "komapping"], function($, ko, mapping){
    // ...
});

所以问题是RequireJS完全忽略baseUrl并paths在配置文件中定义。对于下面代码中所需的每个模块，我都会收到 404 错误。我在浏览器控制台中看到 RequireJS 尝试从/js/没有任何路径转换的情况下加载这些模块：

404: http://localhost/js/jquery.js
404: http://localhost/js/knockout.js
404: http://localhost/js/komapping.js

但是，在页面加载并显示错误后，我在控制台中输入并...

> require.toUrl("jquery")
  "/js/libs/jquery-1.10.1.min"

为什么这样？如何解决这个问题呢？

这是我第一次使用 RequireJS，所以我觉得我跳过了一些非常简单明了的东西。请帮忙。

更新

刚发现这个问题：Require.js ignoring baseUrl

这绝对是我的情况。我在我的网络面板中看到在触发自己的依赖项config.js加载之前没有完全加载。require(...)

但我不想将我require(...)的放在配置中，因为它对于调用它的页面非常具体。在之前看到的任何示例中，我从未注意到这种异步问题。这些例子的作者如何让他们继续工作？

4

2 回答 2

23

解决了。

问题是属性中定义的配置文件data-main是异步加载的，就像其他依赖项一样。所以我的config.js意外从未在require调用之前完全加载和执行。

官方 RequireJS API 中描述了该解决方案：http ://requirejs.org/docs/api.html#config

...此外，您可以在加载 require.js 之前将配置对象定义为全局变量 require，并自动应用这些值。

因此，我刚刚更改了我以使用正确的配置config.js定义全局哈希：require

var require = {
    baseUrl: "/js/libs",
    paths: {
        "jquery":       "jquery-1.10.1.min",
        "knockout":     "knockout-2.2.1",
        "komapping":    "knockout.mapping"
    }
};

并在之前包含它require.js：

<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/require.js"></script>

这种方法允许控制脚本执行顺序，因此config.js总是在下次require调用之前加载。

现在一切正常。

于 2013-06-27T12:47:50.497 回答
4

修复了问题。

我的配置是异步加载的，因此在调用我的 require 语句之前没有设置配置路径。

根据此处的 RequireJS 文档链接，我在 require.js 调用之前向我的配置添加了一个脚本调用。并删除了 data-main 属性。

var require = {
    baseUrl: '/js',
    paths: {
        'jquery':      'vendor/jquery/jquery-2.0.3.min',
        'picker':      'vendor/pickadate/picker.min',
        'pickadate':   'vendor/pickadate/picker.date.min'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'picker':    ['jquery'],
        'pickadate': {
            deps:    ['jquery', 'picker'],
            exports: 'DatePicker'
        }
    }
}

现在一切正常

于 2013-11-15T15:47:26.317 回答