使用 RequireJS 加载 blue-imp jquery 文件上传答案

【问题标题】：load blue-imp jquery fileupload with RequireJS使用 RequireJS 加载 blue-imp jquery 文件上传
【发布时间】：2016-03-13 17:46:35
【问题描述】：

我正在尝试通过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"

为什么它从正确的路径中选择主干，为什么直接从 baseURL 中选择 jqueryFileUpload？

我能够执行正常的 jquery 操作，例如 val()、append()，但是这个有依赖关系，所以我提供了它。

我进行了更多研究，发现了 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"
        }
}

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

有什么建议或方法可以继续前进吗？

【问题讨论】：

标签： jquery requirejs blueimp

【解决方案1】：

由于这个原因，您不能将 shim 配置与 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 文件上传源文件已经使用了define (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 ($, ...) {

【讨论】：

仍然相关。有一个updoot！

【解决方案2】：

您的配置不一致地引用了名称为 jqueryfileupload（在您的 paths 中）和 jqueryFileUpload（在您的 shim 中以及在您对 define 的调用中）的模块。您可以将您的paths 更改为使用jqueryFileUpload，以便它在任何地方都是一致的。

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

【讨论】：