使用 requirejs 加载 blue-imp fileupload 在 blobSlice 上引发错误

Question

我正在使用 requirejs 加载文件上传插件

我正在加载插件如下：

define([
        'jquery',
        'jquery.iframe-transport',
        'jquery.fileupload-ui'
    ], function(
        jquery,
        itransport,
        fileupload_ui
    )
    {

这个 stackoverflow 问题证实了这一点：

requireJS with fileupload plugins

在这些行执行“load-image-meta”时会出现问题：

    loadImage.blobSlice = hasblobSlice && function () { 

未捕获的类型错误：无法设置未定义的属性“blobSlice”。

这是因为 loadImage 被作为未定义的参数传递，一旦我们已经在 line 23 上定义了依赖关系，我就无法弄清楚原因。

有人可以帮我吗？

其他信息（下）

这是在 requirejs.config.paths 中为每个插件定义的路径列表

 'jquery.postmessage-transport': './bower_components/blueimp-file-upload/js/cors/jquery.postmessage-transport',
        'jquery.xdr-transport': './bower_components/blueimp-file-upload/js/cors/jquery.xdr-transport',
        'jquery.ui.widget': './bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget',
        'jquery.fileupload': './bower_components/blueimp-file-upload/js/jquery.fileupload',
        'jquery.fileupload-process': './bower_components/blueimp-file-upload/js/jquery.fileupload-process',
        'jquery.fileupload-validate': './bower_components/blueimp-file-upload/js/jquery.fileupload-validate',
        'jquery.fileupload-image': './bower_components/blueimp-file-upload/js/jquery.fileupload-image',
        'jquery.fileupload-audio': './bower_components/blueimp-file-upload/js/jquery.fileupload-audio',
        'jquery.fileupload-video': './bower_components/blueimp-file-upload/js/jquery.fileupload-video',
        'jquery.fileupload-ui': './bower_components/blueimp-file-upload/js/jquery.fileupload-ui',
        'jquery.fileupload-jquery-ui': './bower_components/blueimp-file-upload/js/jquery.fileupload-jquery-ui',
        'jquery.fileupload-angular': './bower_components/blueimp-file-upload/js/jquery.fileupload-angular',
        'jquery.iframe-transport': './bower_components/blueimp-file-upload/js/jquery.iframe-transport',
 'blueimp-canvas-to-blob': './bower_components/blueimp-canvas-to-blob/js/canvas-to-blob',
        'canvas-to-blob': './bower_components/blueimp-canvas-to-blob/js/canvas-to-blob',
        'load-image': './bower_components/blueimp-load-image/js/load-image',
        'load-image-ios': './bower_components/blueimp-load-image/js/load-image-ios',
        'load-image-orientation': './bower_components/blueimp-load-image/js/load-image-orientation',
        'load-image-meta': './bower_components/blueimp-load-image/js/load-image-meta',
        'load-image-exif': './bower_components/blueimp-load-image/js/load-image-exif',
        'load-image-exif-map': './bower_components/blueimp-load-image/js/load-image-exif-map',
        'tmpl': './bower_components/blueimp-tmpl/js/tmpl'

这是每个文件的依赖列表

jquery.postmessage-transport
---'jquery'

jquery.xdr-transport
---'jquery'


jquery.ui.widget.js
---'jquery'


jquery.fileupload.js
---'jquery',
---'jquery.ui.widget'


jquery.fileupload-process.js
---'jquery',
---'./jquery.fileupload' ***


jquery.fileupload-validate
---'jquery',
----'./jquery.fileupload-process' ***


jquery.fileupload-image
    'jquery',
    'load-image',
    'load-image-meta',
    'load-image-exif',
    'load-image-ios',
    'canvas-to-blob',
    './jquery.fileupload-process' ****

jquery.fileupload-audio
    'jquery',
    'load-image',
    './jquery.fileupload-process'



jquery.fileupload-video.js
    'jquery',
    'load-image',
    './jquery.fileupload-process'


jquery.fileupload-ui
    'jquery',
    'tmpl',
    './jquery.fileupload-image',
    './jquery.fileupload-audio',
    './jquery.fileupload-video',
    './jquery.fileupload-validate'


jquery.fileupload-jquery-ui
    'jquery',
    './jquery.fileupload-ui'


jquery.fileupload-angular
     'jquery',
    'angular',
    './jquery.fileupload-image',
    './jquery.fileupload-audio',
    './jquery.fileupload-video',
    './jquery.fileupload-validate'


jquery.iframe-transport
    'jquery'


blueimp-canvas-to-blob
// duplicated with key "canvas-to-blob" to match jquery.fileupload-image dependency key

load-image
    NO DEPS

load-image-ios
    'load-image'

load-image-orientation
    'load-image'

load-image-meta
    'load-image'

load-image-exif
    'load-image'
    'load-image-meta'

load-image-exif-map
    'load-image',
    'load-image-exif'

tmpl
   NO DEPENDENCIES

Answer 1

正如@ant_Ti 在对我的问题的评论中提到的那样，我不得不在加载 load-image-meta 之前强制 requirejs 加载 load-image，因此我将以下代码添加到我的 requirejs.config.shim 对象中：

require.config({
    shim: {
        'jquery.fileupload-ui': {
            deps: ['load-image']
        }
    }
});

这确保当我们尝试加载 jquery.fileupload-ui 时，load-image 已经可用。