如何将 RequireJS 与 jQuery 一起使用

简介§ 1
全局函数§ 2
模块名称§ 3
使用 shim 配置的示例§ 4
从 CDN 加载 jquery 的示例§ 5
映射模块以使用 noConflict§ 6
使用合并后的 require-jquery 文件的先前示例§ 7

简介 § 1

尽管 RequireJS 加载 jQuery 的方式与加载其他依赖项一样，但 jQuery 的广泛使用以及其丰富的插件生态系统意味着你的项目中可能会有其他脚本也依赖于 jQuery。根据你是新建项目还是改造现有代码，你可能会采用不同的 jQuery RequireJS 配置方法。

全局函数 § 2

即便检测到 AMD/RequireJS，jQuery 仍会将其自身注册为全局变量 "$" 和 "jQuery"。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 目录下。这样就不需要上面提到的路径配置项。

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

因此再强调一次，如果你使用另一个模块名来引用 jQuery，比如'lib/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()以便正确地表达它们的依赖关系。Shim 配置在使用 CDN 资源进行优化构建后无法工作。

从 CDN 使用 jQuery 的示例

映射模块以使用 noConflict § 6

如果所有你的模块（包括任何依赖 jQuery 的第三方 jQuery 插件或库代码）都是 AMD 兼容的，并且你希望在它们调用时避免 $ 或 jQuery 出现在全局命名空间中requirejs(['jquery'])，你可以使用map 配置将对 jQuery 的使用映射到一个调用 noConflict 的模块，并返回该 jQuery 实例作为 'jquery' 模块 ID 的值。

你可以将本示例与上面 CDN 示例结合使用——shim 示例将不工作，因为 shim 化的库需要一个全局的 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 的合并版本。这不再是推荐的与 require.js 一起使用 jQuery 的方式，但如果你正在寻找（不再维护的）示例，你可以在这里找到 require-jquery.

一个 JavaScript 模块加载器