2014-08-27 56 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 ($, ...) {