将私有jquery与RequireJS结合使用-优化后的问题 [英] Using private jquery with RequireJS - issue after optimisation

问题描述

我正在将一个使用requireJS的框架与一个CDN版本的jQuery组合在一起(现在建议使用此方法)，并且在优化代码时遇到了一些问题.输出具有名称空间，我指定每个模块使用文档中概述的私有版本的jquery:

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

优化后，我看到的问题是"jquery-private.js"文件中的"jq"未定义.

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

有什么想法吗?我尝试设置jq = $，但这似乎破坏了全局变量.

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

谢谢.

推荐答案

这就是我为获得 RequireJS jQuery指令页面链接的优化示例，以与映射模块以使用您粘贴在原始问题中的noConflict 部分.

Here is what I did to get the jQuery CDN & optimization sample linked from the RequireJS jQuery Instructions page to work with the Mapping Modules to use noConflict section that you pasted in your original question.

1-分叉了样本

2-创建的文件www/js/lib/jquery-private.js具有此内容

2 - Created file www/js/lib/jquery-private.js with this content

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

3-修改后的www/js/app.js粘贴了map部分，因此require.config现在看起来像这样:

3 - Modified www/js/app.js to paste the map section so the require.config now looks like this:

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:

4 - Modified www/js/app/main.js to use jqlocal instead of $ (just to prove to myself that it's not the global jQuery:

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

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

5 - Changed to the tools folder and ran:

node r.js -o build.js

6-更改为创建并运行servedir的www-build文件夹(与什么Web服务器无关，但这是我用于开发的内容)

6 - Changed to the www-build folder that was created and ran servedir (doesn't really matter what web server but that's what I use for dev)

7-浏览到本地地址&应用程序的端口号(在我的情况下为http://localhost:8000/app.html)并看到:

7 - Browsed to the local address & port number of the app (in my case http://localhost:8000/app.html) and saw:

Alpha是Go！

Alpha is Go!

测试就是开始！

您可以在此处

这篇关于将私有jquery与RequireJS结合使用-优化后的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！