要求 JS 忽略我的配置

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

由于站点引擎使用干净的 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(...) 放在配置中，因为它对于调用它的页面非常具体。在之前看到的任何示例中，我从未注意到这种异步问题。这些示例的作者如何让他们继续工作？

Answer 1

解决了。

问题在于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 调用之前加载。

现在一切正常。

Answer 2

解决了这个问题。

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

根据 RequireJS 文档 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'
        }
    }
}

现在一切正常