2014-08-27 55 views
1

我想加載jQuery文件上傳blue-imp 與RequireJS。與RequireJS加載藍色小鬼jquery文件上載

我在加載時遇到了一些問題。我嘗試了像thisthis這樣的解決方案,但沒有一個適合我的情況。

我在我的main.js確實是

require.config({ 
    baseUrl : 'js', 
    paths: { 
     jquery: 'lib/jquery/jquery-1.11.0', 
     jqueryfileupload : 'lib/jquery/jquery.fileupload', 
     underscore: 'lib/backbone/underscore/underscore-min', 
     backbone: 'lib/backbone/backbone-min', 
    }, 
    shim : {   
    'underscore' : { 
     exports : "_" 
    }, 
    'backbone' : { 
     deps : [ "underscore", "jquery" ], 
     exports : "Backbone" 
    }, 
    'jqueryFileUpload' : { 
     deps : ["jquery"]   
    } 
}); 
在我看來

當我貼膜它

define(['backbone', 'jqueryFileUpload' ], 
     function(Backbone, fileupload) { 

}); 

它給我的控制檯錯誤

"NetworkError: 404 Not Found - http://localhost/AppUI/js/jqueryFileUpload.js?cmmn=1409151733588"

爲什麼它正在從正確的路徑中選擇骨幹,併爲什麼jQuery從baseURL直接FileUpload?

我能夠執行像val(),append()這樣的正常jquery操作,但是這個依賴關係,所以我提供了它。

我研究了一下,發現了fileupload.js的jQuery UI和小部件的嵌套依賴關係。我也在我的進口他們

 paths : { 
      jquery: 'lib/jquery/jquery-1.11.0', 
      jqueryUI : 'lib/jquery/jquery-ui-1.10.4.custom.min', 
      jqueryfileupload : 'lib/jquery/jquery.fileupload' 
     }, 

     shim : { 
      'jqueryUI' : ['jqueryUI'], 
      'jqueryFileUpload' : { 
        deps : ["jquery", "jqueryUI", "jqueryIframetransport"], 
        exports : "jQueryFileUpload" 
     } 
} 

即使在這之後我得到了同樣的錯誤。它正在挑選錯誤的道路。

任何建議或方法繼續前進?

回答

0

您的配置不一致是指你的模塊名稱爲​​(在你的paths),並與jqueryFileUpload(在你的shim,並在您的來電define)。您可以將您的paths更改爲使用jqueryFileUpload,以便在任何地方都一致。

當你告訴RequireJS關於一個模塊時,你應該在任何地方用相同的名稱來引用它。就RequireJS而言,foo,FOO,Foo,FoO都是不同的模塊。

1

不能使用墊片配置與jQuery文件上傳出於這個原因(shim config):

//Remember: only use shim config for non-AMD scripts, 
//scripts that do not already call define(). The shim 
//config will not work correctly if used on AMD scripts, 
//in particular, the exports and init config will not 
//be triggered, and the deps config will be confusing 
//for those cases. 

jQuery的文件上傳源文件已經使用了定義(AMD)的腳本! (看jquery.fileupload.js) 即便如此,你可以配置requirejs依賴關係是這樣的:

頂級項目目錄(涼亭兼容):

* app/ 
    - modules/ 
     - module.js 
    - vendor/ 
     - jquery/ 
      - dist/ 
       - jquery.js 
     - underscore/ 
      - underscore.js 
     - jquery.fileupload-upload/ 
      - vendor/ 
       - jquery.ui.widget.js 
      - js/ 
       - jquery.fileupload.js 
       - jquery.fileupload.image.js. 
       - ... 

config.js:

var require = { 
    "baseUrl": "/app/", 
    "shim": { 
     jquery: { 
      exports: "$" 
     }, 
     underscore: { 
      exports: "_" 
     } 
    }, 
    "paths": { 
     "jquery": "vendor/jquery/dist/jquery.min", 
     "jquery.ui.widget": "vendor/jquery-file-upload/js/vendor/jquery.ui.widget", 
     "underscore": "vendor/underscore/underscore-min", 
     "bootstrap": "vendor/bootstrap/dist/js/bootstrap.min", 
     "tmpl": "vendor/blueimp-tmpl/js/tmpl", 
     "load-image": "vendor/blueimp-load-image/js/load-image", 
     "load-image-meta": "vendor/blueimp-load-image/js/load-image-meta", 
     "load-image-exif": "vendor/blueimp-load-image/js/load-image-exif", 
     "load-image-ios": "vendor/blueimp-load-image/js/load-image-ios", 
     "canvas-to-blob": "vendor/blueimp-canvas-to-blob/js/canvas-to-blob", 
     "jquery.iframe-transport": "vendor/jquery-file-upload/js/jquery.iframe-transport", 
     "jquery.fileupload": "vendor/jquery-file-upload/js/jquery.fileupload", 
     "jquery.fileupload-process": "vendor/jquery-file-upload/js/jquery.fileupload-process", 
     "./jquery.fileupload-process": "vendor/jquery-file-upload/js/jquery.fileupload-process", 
     "jquery.fileupload-image": "vendor/jquery-file-upload/js/jquery.fileupload-image", 
     "jquery.fileupload-audio": "vendor/jquery-file-upload/js/jquery.fileupload-audio", 
     "jquery.fileupload-video": "vendor/jquery-file-upload/js/jquery.fileupload-video", 
     "jquery.fileupload-validate": "vendor/jquery-file-upload/js/jquery.fileupload-validate", 
     "jquery.fileupload-ui": "vendor/jquery-file-upload/js/jquery.fileupload-ui", 
    } 
}; 

模塊:

define(['jquery', 
'tmpl', 
'load-image', 
'load-image-meta', 
'load-image-exif', 
'canvas-to-blob', 
'jquery.iframe-transport', 
'jquery.fileupload', 
'jquery.fileupload-process', 
'jquery.fileupload-image', 
'jquery.fileupload-audio', 
'jquery.fileupload-video', 
'jquery.fileupload-validate', 
'jquery.fileupload-ui'], 

function ($, ...) {