2

I'm putting together a framework using requireJS with a CDN version of jQuery (as is now the recommended approach) and having some issue when optimizing the code. The output is namespaced and I'm specifying that each module use a private version of jquery as outlined in the documentation:

require.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 );
});

The problem I'm seeing after optimization is that "jq" is undefined in the "jquery-private.js" file.

Any ideas? I've tried setting jq = $ but that seems to destroy the global.

Thanks.

4

2 回答 2

5

这是我从RequireJS jQuery Instructions 页面获取链接的jQuery CDN 和优化示例所做的工作，以使用您在原始问题中粘贴的映射模块以使用 noConflict部分。

1 - 分叉样本

www/js/lib/jquery-private.js2 -使用此内容创建文件

define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

3 - 修改www/js/app.js为粘贴该map部分，require.config现在看起来像这样：

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
    },
    map: {
      '*': { 'jquery': 'jquery-private' },
      'jquery-private': { 'jquery': 'jquery' }
    }    
});

4 - 修改www/js/app/main.js为使用jqlocal而不是$（只是为了向自己证明它不是全局 jQuery：

define(["jquery", "jquery.alpha", "jquery.beta"], function(jqlocal) {
    jqlocal(function() {
        jqlocal('body').alpha().beta();
    });
});

5 - 更改为tools文件夹并运行：

node r.js -o build.js

6 - 更改为www-build已创建并运行的文件夹servedir（与 Web 服务器无关，但这就是我用于开发的文件夹）

7 - 浏览到应用程序的本地地址和端口号（在我的情况下http://localhost:8000/app.html）并看到：

阿尔法是围棋！

Beta是Go！

你可以在这里看到最终结果

于 2013-07-13T00:16:33.570 回答
0

为了让它工作，我改变了我使用 Require 的方式（可能我应该一直这样做）。这些信息可能对其他人有用，所以我想我会把它放在那里。

以前我在定义的模块中指定任何依赖项：

define( [ "dep1", "dep2", "jquery" ], function( var1, var2, jq ) {

这最初工作得很好，但在优化时失败了。我将依赖项移至包含此模块的 require 函数调用，然后它开始在优化前和优化后都可以正常工作，其中 jquery 被私下使用：

require( [ 'jquery', 'dep1', 'dep2' ], function( jq, var1, var2 ) {
    formValidator.formValidationInit( jq( el ) );
});

我不会认为这会有所作为，但似乎也是如此。

还值得注意的是，我不得不更改 jquery-private 文件，因为它仍然引发有关“jq”未定义的问题。我现在将 jq 设置为等于全局 $ 并返回它，以便可以私下使用它：

define(['jquery'], function () {
    var jq = $;
    return jq.noConflict( true );
});
于 2013-07-22T09:48:32.790 回答