Question

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

/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

由于网站引擎使用干净的网址，我使用<script>中的绝对路径：

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

RequireJS config：

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

然而，在加载页面并显示错误后，我输入console并...

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

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

这是我第一次使用RequireJS的经历，所以我觉得我已经跳过了一些非常简单明了的东西。求助。

更新

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

这绝对是我的理由。我在“网络”面板中看到config.js在require(...)触发自己的依赖项加载之前未完全加载。

但我不想将require(...)放在配置中，因为它非常适合调用它的页面。在以前见过的任何例子中，我都没有注意到异步性这样的问题。这些例子的作者如何让他们继续工作？

Answer 1

解决。

问题是data-main属性中定义的配置文件是异步加载的，就像其他依赖项一样。因此，在config.js致电之前，require意外地从未完全加载并执行。

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

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

所以我刚刚更改了我的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调用之前加载。

现在一切都很完美。

Answer 2

修正了问题。

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

根据RequireJS docs Link here，我在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'
        }
    }
}

一切正在运转

要求JS忽略我的配置

2 个答案: