理解requirejs路径配置

Question

使用 requirejs，我的 main.js 文件如下：

requirejs.config({
    baseUrl: '/javascript/',
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        async: 'requirePlugins/async',
            hbs: 'hbs'
    },
    waitSeconds: 7
});
define(['common'], function () {
    loadFonts();
});

通过 script 调用将 main.js 包含在页面中

<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>

Common是网站的基本功能，例如jquery文档中的ready函数等都被包装在一个define调用中：

define(['jquery'], function() {
    //jQuery dependant common code
});

这个没问题，jQuery是从Google CDN加载的，代码也被执行了。但是当我在加载main.js之后添加一个require调用时

<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>
require(['jquery'], function ($) {
    //code
});

请求jquery的路径应该是定义为使用Google CDN而不是从/javascript/jquery.js获取。虽然我还是requirejs的新手，但在其他请求被触发之前应该先定义好路径。请问有谁能够帮我理解我错在哪里了吗？

- Hans Skov

Answer 1

我认为这可能是由于在RequireJS脚本标签上使用了data-main属性; 为了解析它，RequireJS本身必须加载和解析。在我的测试中（特别是针对IE9），浏览器会在解析RequireJS配置文件之前下载并执行紧随RequireJS脚本标签的任何脚本标签（由data-main属性指定的那个）。

为了解决这个问题，我简单地放弃使用data-main属性，而是将配置文件作为普通脚本标签直接放在RequireJS脚本标签后面，现在一切都很顺利。

具体来说，就像这样（使用您的示例）：

<script src="/javascript/require-2.0.1.js"></script>
<script src="/javascript/main.js"></script>

- ken

---

在浪费了一个多小时后，我也放弃了 data-main。使用两个脚本的方法消除了我的定义加载错误。非常感谢！ - Yuck

Answer 2

也许您把config语句放在require.js加载之前了。

您应该先加载require.js，然后放置配置代码，最后调用require（['jquery']，...）;

它搜索 /javascript/ 的原因是因为您的require.js文件位于那里，并且它是默认基础网址。

您的配置可能永远不会被require.js使用。

请参见关于require配置的此教程。

- Chris Li

Answer 3

原因是您在加载 require.js 模块后立即放置了 require(['jquery']...。结果，它尝试在读取配置设置之前加载 ['jquery']。

而为什么它要在 /javascript/jquery.js 中查找 jquery？那是因为您的 data-main 属性。

RequireJS 相对于 baseUrl 加载所有代码。baseUrl 通常设置为与用于页面顶层脚本加载的 data-main 属性中使用的脚本相同的目录。

此链接澄清了 require.js 模块加载过程： http://requirejs.org/docs/api.html#jsfiles

- Arashsoft

Answer 4

我建议使用map来配置特定的模块位置，而不是使用paths。

paths更适用于简化/配置包含路径的快捷方式/前缀，而不是完整的模块路径。

请注意：您需要将要全局应用的映射放置在map对象中的星号（*）键下。

- Ben Mosher

Answer 5

你需要将define重命名为require

require(['common'], function () {
    loadFonts();
});

- Sergey

Answer 6

我认为你可以在 require 块中嵌入完整的 URL，例如：

require(['http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'], function ($) {
   //code
});

顺便说一下，你的 jQuery 链接无效。

- HungryCoder

---

我可以这样做，但是jQuery将自己定义为一个amd模块，所以我应该能够使用“jquery”而不必每次都写整个URL。为什么jQuery链接无效？ - Hans Skov

嗨，我尝试访问 http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min，但发现404错误。 - HungryCoder

抱歉，我忘记了RequireJS会将“.js”附加到脚本上，假设所有模块都是脚本。你的链接是正确的。对于造成的困惑，我很抱歉。 - HungryCoder