Question

我试图通过blue-imp加载jquery文件上传量与RequireJS。

我在加载时遇到了一些问题。我尝试过像this和this这样的解决方案，但没有一个适用于我的情况。

我在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"

为什么它从正确的路径中挑选骨干以及为什么jqueryFileUpload直接来自baseURL？

我能够执行正常的jquery操作，比如val（），append（）但是这个操作具有依赖性，所以我提供了它。

我研究了一下，发现了fileupload.js的嵌套依赖项，它们是jquery ui和widget。我也在我的

中导入了它们

        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"
        }
}

即使在此之后我也会遇到同样的错误。它走错了道路。

有任何建议或方法可以提前进行吗？

Answer 1

出于这个原因，您不能将shim配置与jquery fileupload一起使用（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文件上传源文件已经使用了define（AMD）脚本！（看看jquery.fileupload.js）即便如此，您也可以通过以下方式配置requirejs依赖项：

顶级项目目录（与bower兼容）：

* 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 ($, ...) {

Answer 2

您的配置不一致是指您的模块名称为jqueryfileupload（位于paths）和jqueryFileUpload（位于shim中，以及您对{{{ 1}}）。您可以将define更改为使用paths，以便在任何地方都保持一致。

当你告诉RequireJS一个模块时，你应该在任何地方用相同的名称来引用它。就RequireJS而言，jqueryFileUpload，foo，FOO，Foo都是不同的模块。

使用RequireJS加载blue-imp jquery fileupload

2 个答案: