使用 jQuery 作为依赖项而不用 RequireJS 加载 jQuery？答案

【问题标题】：Use jQuery as a dependency without loading jQuery with RequireJS?使用 jQuery 作为依赖项而不用 RequireJS 加载 jQuery？
【发布时间】：2013-02-16 00:14:10
【问题描述】：

考虑以下页面：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
    <script data-main="app" src="require.js"></script>
</body>
</html>

当没有加载 RequireJS 时，如何使用 jQuery 作为 RequireJS 模块的依赖项？我知道jQuery exposes itself 是一个全局 AMD 模块，所以我应该能够将它添加为依赖项，但我不太确定如何添加。

我希望能够做到以下几点：

require(['jquery'], function() {
    console.log('success')
});

如果 jQuery 还没有完成加载，它应该等待它完成，然后继续。这可能吗？

【问题讨论】：

标签： jquery dependencies requirejs

【解决方案1】：

先加载 jQuery，先加载 RequireJS。加载两者后运行您的主模块。

<html>
<head>
    <script src="require.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
    <script>
        require(["app"], function(app){
            app.runMe()
        })
    </script>
</body>
</html>

如果 jQuery 没有看到 define.amd 浮动，它不会将自己注册为 AMD 模块。使其正确注册的唯一方法是在 jQuery 之前加载 RequireJS。

【讨论】：

不适合我。这就是我所得到的：pastebin.com/MwGvAd7L 我遇到了不匹配错误。我阅读了文档，但并没有真正给我太多。我什至不能require('init')，我得到同样的错误。有任何想法吗？这听起来像我需要的解决方案，我只需要让它工作。 编辑：我还应该提到它会在控制台中吐出整个 jquery 源代码。
原来控制台中记录的不是 jQuery，而是 BlockUI（不管是什么）。如果我删除 BlockUI 它可以工作，但 BlockUI 包含在我网站上的插件中，所以我无法删除它。不太确定在这里做什么。想法？
在 BlockUI 底部找到这个：if (typeof define === 'function' && define.amd && define.amd.jQuery) { define(['jquery'], setup); } else { setup(jQuery); } 为什么它会用setup 覆盖 jQuery？
BlockUI 可能不重新定义了 jQuery。它依赖并且要求 jquery 可能会扩展它。另外，我看不到您在 PasteBin example you provided 中加载 jQuery 的位置
抱歉回复晚了，希望你还在。好吧，不管它在做什么，它似乎都不是正确的做法，对吧？我没有在 pastebin 中包含 jQuery，因为 Wordpress 在标题中为我加载了它。顺序如下：1）Require.js 2）jQuery 3）BlockUI。它应该可以正常工作，不是吗？

【解决方案2】：

您应该将 jquery 定义为 shim，如下所示：

requirejs.config({
  shim: {
    'jquery': {
        exports: '$'
    }
  },
  path : {
    jquery : '$PATH/jquery.js'
  }
});

【讨论】：

路径是什么，垫片实际上是做什么的？

【解决方案3】：

一种方法是使用 data-main 属性通过 require.js 加载 main.js 文件：

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

main.js 文件的风格是：

requirejs.config({
    shim: {         // regard the shim structure as a dependency map
        'jquery': [],
        'app': ['jquery']    // app code will not execute before jquery is loaded
    },
    waitSeconds: 20
});

require(
    [
        'jquery',
        'app'
    ],
    function(
        $
    ) {
        //the plugins from the dependency array have been loaded.
        console.log ("jQuery and app loaded through require.js");
    }
);

上面的示例假设您从与 require.js 相同的位置（即您的站点）加载 jquery.js

【讨论】：