简介 § 1

虽然 RequireJS 像加载任何其他依赖项一样加载 jQuery，但 jQuery 的广泛使用和广泛的插件生态系统意味着您的项目中可能还有其他依赖于 jQuery 的脚本。根据您是开始新项目还是调整现有代码，您可能会采用不同的 jQuery RequireJS 配置方法。

全局函数 § 2

jQuery 将自身注册为全局变量“$”和“jQuery”，即使它检测到 AMD/RequireJS。AMD 方法建议不要使用全局函数，但关闭这些 jQuery 全局变量的决定取决于您是否拥有依赖于它们的非 AMD 代码。jQuery 有一个 noConflict 函数，支持释放对全局变量的控制，这可以在您的 requirejs.config 中自动完成，我们将在稍后看到。

模块名称 § 3

jQuery 在检测到 AMD/RequireJS 时定义命名 AMD 模块“jquery”（全部小写）。为了减少混淆，我们建议在您的 requirejs.config 中使用“jquery”作为模块名称。

示例

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        // the left side is the module ID,
        // the right side is the path to
        // the jQuery file, relative to baseUrl.
        // Also, the path should NOT include
        // the '.js' file extension. This example
        // is using jQuery 1.9.0 located at
        // js/lib/jquery-1.9.0.js, relative to
        // the HTML page.
        jquery: 'jquery-1.9.0'
    }
});

另一种（推荐的）解决方案是将文件命名为“jquery.js”并将其放在 baseUrl 目录中。然后不需要上面的路径条目。

您可以通过根据默认的 ID 到路径约定 baseUrl + moduleID + '.js' 放置文件来避免大量的配置行。下面的示例展示了如何将 baseUrl 设置为第三方库代码的目录，并为您的应用程序代码使用一个额外的路径配置。

所以重申一下，如果您使用其他模块名称（例如 'lib/jquery'）引用 jQuery，您可能会收到错误消息。此示例不起作用


    // THIS WILL NOT WORK
    define(['lib/jquery'], function ($) {...});

它不起作用，因为 jQuery 使用名称“jquery”而不是“lib/jquery”注册自身。一般来说，不鼓励在 define() 调用中显式命名模块，但jQuery 有一些特殊的限制。

使用 shim 配置的示例 § 4

此示例展示了如何使用shim 配置为不调用define()的 jQuery 插件指定依赖项。如果您有一个想要转换的现有 jQuery 项目，并且不想修改 jQuery 插件的源代码以调用 define()，则此示例很有用。

使用带有 shim 配置的 jQuery 的示例

从 CDN 加载 jQuery 的示例 § 5

此示例展示了如何在从内容交付网络（CDN）加载 jQuery 的同时加载和优化您的代码。此示例要求您的所有 jQuery 插件都调用define()以正确表达它们的依赖关系。使用 CDN 资源进行优化构建后，Shim 配置将不起作用。

使用 CDN 中的 jQuery 的示例

映射模块以使用 noConflict § 6

如果您的所有模块（包括任何依赖于 jQuery 的第三方 jQuery 插件或库代码）都与 AMD 兼容，并且您希望在调用 requirejs(['jquery']) 时避免在全局命名空间中使用 $ 或 jQuery，则可以使用map 配置将 jQuery 的使用映射到调用 noConflict 并为“jquery”模块 ID 返回 jQuery 值的模块。

您可以将此示例与上面的 CDN 示例一起使用——shim 示例将不起作用，因为 shimmed 库需要全局 jQuery。

requirejs.config({
    // Add this map config in addition to any baseUrl or
    // paths config you may already have in the project.
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },

      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    }
});

// and the 'jquery-private' module, in the
// jquery-private.js file:
define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

这意味着任何使用 jQuery 的模块都需要使用 AMD 返回值，而不是依赖于全局 $


requirejs(['jquery'], function( $ ) {
    console.log( $ ) // OK
});

requirejs(['jquery'], function( jq ) {
    console.log( jq ) // OK
});

requirejs(['jquery'], function( ) {
    console.log( $ ) // UNDEFINED!
});

使用连接的 require-jquery 文件的先前示例 § 7

以前，我们一直在指向一个使用特殊 require-jquery 文件的示例，该文件由 require.js 和 jQuery 连接而成。这不再是将 jQuery 与 require.js 一起使用的推荐方法，但如果您正在寻找（不再维护的）示例，您可以在此处找到 require-jquery。