在RequireJS中使用私有jquery - 優化後的問題

Question

我在使用requireJS和jQuery的CDN版本（現在是推薦的方法）並且在優化代碼時遇到了一些問題。輸出命名空間，我指定每個模塊使用jquery的私人版本文檔中列出：

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

我優化後看到的問題是，「JQ」中的「jQuery是未定義-private.js「文件。

任何想法？我試過設置jq = $但是這似乎破壞了全球。

謝謝。

Answer 1

以下是我所做的，可以讓RequireJS jQuery Instructions page鏈接的jQuery CDN & optimization sample與您在原始問題中粘貼的Mapping Modules to use noConflict部分配合使用。

1 - 分岔的sample

2 - 創建文件www/js/lib/jquery-private.js與此內容

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）並看到：

Alpha is Go！

Beta是Go！

你可以看到最終結果here

Answer 2

爲了得到這個工作，我改變了我使用要求的方式（可能我應該怎麼一直在這樣做）。這些信息可能對其他人有用，所以我認爲我會把它放在那裏。

以前我是指定定義模塊中的任何依賴關係：

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

這最初工作得很好，但優化的時候失敗了。讓我感動的依賴於需要函數調用，包括該模塊並隨後開始工作確定之前和之後的優化，使用jQuery由私人使用：

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

我不會想到這會作出差異，但似乎也是如此。

還值得一提的是，我不得不改變jQuery的私人文件，因爲它仍然拋出了一個問題，關於沒有被定義的「JQ」。我現在設置jq等於全球$，並返回它，因此它可以使用樞軸：

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