理解 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();
});

main.js 通过脚本调用包含在页面中

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

Common 是网站的基本功能，jquery doc 准备功能等，包装在一个定义调用中：

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

这很好用，jQuery 从谷歌 CDN 加载并执行代码。但是当我在加载 main.js 之后添加一个 require 调用

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

jquery 是从 /javascript/jquery.js 请求的，而不是从 google cdn 定义的路径。我仍然是 requirejs 的新手，但在我看来，应该在触发任何其他请求之前定义路径，有人可以帮我理解我做错了什么吗？

Answer 1

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

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

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

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

Answer 2

也许你把config语句放在加载require js之前。

你应该先加载 require.js，把你的配置代码放在后面，然后调用 require(['jquery'], ...);

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

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

请参阅this tutorial 了解有关要求配置的信息。

Answer 3

你必须将define重命名为require

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

Answer 4

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

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

请记住：您需要将要全局应用的映射放在 map 对象中的星号 (*) 键下。

Answer 5

原因是你在加载 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

Answer 6

我认为您可以将完整的 url 嵌入到 require 块中。喜欢：

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

顺便说一句，您的 jquery 链接无效。