要求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忽略了baseUrl

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

但是我不想在配置中放置我的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 链接 ，我在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'
        }
    }
}

现在一切正常