jQuery 在子文件夹中不使用 RequireJS答案

【问题标题】：jQuery not working with RequireJS when in subfolderjQuery 在子文件夹中不使用 RequireJS
【发布时间】：2013-04-06 04:53:01
【问题描述】：

我有以下文件夹结构：

在 index.html 中，我在 head 部分添加了以下行：

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

当我向 main.js 添加一个简单的警报时，它可以工作。当我想使用 jQuery 时，它不起作用：

require(['libs/jquery'], function ($) {
    $('#test').html('123');
});

在 chrome web 检查器中，我看到 jquery 已成功加载，但文本未出现在我的 div 中。当我将 jquery 移出 ./js/libs 并将其放入 ./js 时（当然将依赖项更改为 ['jquery']），它就可以工作了。

我做错了什么？为什么我不能将 jquery 放入 ./js/libs 以保持井井有条？

谢谢

【问题讨论】：

当你的 main.js 运行时 DOM 是否可能还没有准备好，因此 #test 没有更新？尝试将您的测试代码包装在 $( function() { ... });

标签： requirejs

【解决方案1】：

如果我配置路径

require.config({
    paths: {
        'jquery': 'libs/jquery'
    }
});

并将要求更改为：

require(['jquery'], function ($) {
    $('#test').html('123');
});

它似乎正在工作。如果有人能解释一下为什么。

【讨论】：

当 jQuery 调用 define（AMD 模块被定义/提供给任何 AMD 加载器的方式）时，它会为自己提供模块名称 jquery。现在，如果你调用require(['lib/jquery'], ...)，它会在lib 中找到jquery.js，加载文件并发现它没有命名为lib/jquery，而只有jquery。因此不是您正在寻找的模块。至少我是这么理解这个问题的。
即使您在函数回调中没有 $ 引用，它也可以工作，因为 jQuery 引用在全局范围内。为了避免您需要将 jQuery 定义为模块并解决名称冲突并将其作为对象返回。类似于 define(["jQuery"], function(){ return jQuery.noConflict(true); });

【解决方案2】：

您必须提供 basePath 才能正常工作。在您的情况下，它只是 js。您可以在 main.js 文件的开头执行此操作。

require.config({
    baseUrl: '/js'
});

之后此代码将起作用，因为它将 baseUrl 与您的相对 url 连接起来。

require(['libs/jquery'], function ($) {
    $('#test').html('123');
});

【讨论】：