要求JS忽略我的配置

And*_*ins 15 javascript requirejs

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

/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
Run Code Online (Sandbox Code Playgroud)

由于站点引擎使用干净的URL我在使用绝对路径<script>:

<script type="text/javascript" data-main="/js/config.js" src="/js/require.js"></script>
Run Code Online (Sandbox Code Playgroud)

RequireJS配置:

requirejs.config({

    baseUrl: "/js/libs",

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

});
Run Code Online (Sandbox Code Playgroud)

HTML中的某个地方:

require(["jquery", "knockout", "komapping"], function($, ko, mapping){
    // ...
});
Run Code Online (Sandbox Code Playgroud)

所以问题是RequireJS完全忽略baseUrlpaths在配置文件中定义.我在下面的代码中要求的每个模块都会出现404错误.我在浏览器控制台中看到RequireJS尝试从/js/没有任何路径转换的情况下加载这些模块:

404: http://localhost/js/jquery.js
404: http://localhost/js/knockout.js
404: http://localhost/js/komapping.js
Run Code Online (Sandbox Code Playgroud)

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

> require.toUrl("jquery")
  "/js/libs/jquery-1.10.1.min"
Run Code Online (Sandbox Code Playgroud)

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

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

更新

刚发现这个问题:Require.js忽略了baseUrl

这绝对是我的理由.我在我的网络面板中看到,config.jsrequire(...)激活自己的依赖项加载之前没有完全加载.

但是我不想放置我require(...)的配置,因为它非常特定于调用它的页面.在以前见过的任何例子中,我都没有注意到异步性这样的问题.这些例子的作者如何让他们工作?

And*_*ins 23

解决了.

问题是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"
    }
};
Run Code Online (Sandbox Code Playgroud)

并在之前包含它require.js:

<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/require.js"></script>
Run Code Online (Sandbox Code Playgroud)

此方法允许控制脚本执行顺序,因此config.js将始终在下次require调用之前加载.

现在一切都很完美.

  • 它会说需求没有定义 (2认同)