要求JS忽略我的配置 [英] Require JS is ignoring my config

问题描述

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

I'm having pretty simple directory structure for scripts:

/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> 中使用绝对路径：

Since the site engine uses clean URLs I'm using absolute paths in <script>:

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

RequireJS config：

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 和路径在配置文件中定义。我在下面的代码中要求的每个模块都会出现404错误。我在浏览器控制台中看到RequireJS尝试从 / js / 加载这些模块而没有任何路径翻译：

So the problem is that RequireJS completely ignores baseUrl and paths defined in config file. I get 404 error for every module required in the code below. I see in browser console that RequireJS tries to load these modules from /js/ without any path translations:

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

然而，在加载页面并显示错误后，我输入控制台和...

However after the page is loaded and the errors are shown I type in console and...

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

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

Why so? How to solve this problem?

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

It's my first experience using RequireJS, so I'm feeling like I've skipped something very simple and obvious. Help, please.

更新

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

这绝对是我的案件。我在网络面板中看到 config.js 在 require（...）之前未完全加载loading。

It's definitely my case. I see in my Network panel that config.js is not completely loaded before require(...) fires own dependency loading.

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

But I don't want to place my require(...) in config because it is very specific for the page that calls it. I've never noticed such problem with asynchronicity in any example seen before. How do authors of these examples keep them working?

推荐答案

解决。

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

The problem was that config file defined in data-main attribute is loaded asynchronously just like other dependencies. So my config.js accidentally was never completely loaded and executed before require call.

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

The solution is described in official RequireJS API: http://requirejs.org/docs/api.html#config

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

... Also, you can define the config object as the global variable require before require.js is loaded, and have the values applied automatically.

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

So I've just changed my config.js to define global require hash with proper configuration:

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 将始终在下一个要求来电之前加载。

This approach allows to control script execution order, so config.js will always be loaded before next require calls.

现在一切正常。

这篇关于要求JS忽略我的配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！