Javascript jquery.fileupload插件导致require.js随机导致导入失败
我正在使用require.js，并且有一个页面，其中包含使用jquery.fileupload的源代码。在引入插件后，我现在看到一些文件在执行define回调之前无法导入。这会导致库无法找到依赖项的随机错误。就好像require.js在解决所有依赖项之前就已经开始了 我遵循了以下说明： 但除此之外，这是一个非常普通的安装。我正在尽可能使用库的缩小版本。欢迎有任何见解 下面是main.js：Javascript jquery.fileupload插件导致require.js随机导致导入失败,javascript,requirejs,jquery-file-upload,Javascript,Requirejs,Jquery File Upload,我正在使用require.js，并且有一个页面，其中包含使用jquery.fileupload的源代码。在引入插件后，我现在看到一些文件在执行define回调之前无法导入。这会导致库无法找到依赖项的随机错误。就好像require.js在解决所有依赖项之前就已经开始了 我遵循了以下说明： 但除此之外，这是一个非常普通的安装。我正在尽可能使用库的缩小版本。欢迎有任何见解 下面是main.js： (function () {
(function () {
'use strict';
require.config({
baseUrl: '/js',
waitSeconds: 800,
paths: {
jquery: ['//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min',
'lib/jquery/jquery-2.0.3.min'],
'jquery.fileupload': 'lib/jquery.fileupload/jquery.fileupload',
'jquery.fileupload-ui': 'lib/jquery.fileupload/jquery.fileupload-ui',
'jquery.fileupload-image': 'lib/jquery.fileupload/jquery.fileupload-image',
'jquery.fileupload-validate': 'lib/jquery.fileupload/jquery.fileupload-validate',
'jquery.fileupload-video': 'lib/jquery.fileupload/jquery.fileupload-video',
'jquery.fileupload-audio': 'lib/jquery.fileupload/jquery.fileupload-audio',
'jquery.fileupload-process': 'lib/jquery.fileupload/jquery.fileupload-process',
'jquery.ui.widget': 'lib/jquery.ui/jquery.ui.widget',
'jquery.iframe-transport': 'lib/jquery.iframe-transport/jquery.iframe-transport',
'load-image': 'lib/load-image/load-image.min',
'load-image-meta': 'lib/load-image/load-image-meta',
'load-image-exif': 'lib/load-image/load-image-exif',
'load-image-ios': 'lib/load-image/load-image-ios',
'canvas-to-blob': 'lib/canvas-to-blob/canvas-to-blob.min',
tmpl: 'lib/tmpl/tmpl.min',
bootstrap: 'lib/bootstrap/bootstrap',
bootstrapTab: 'lib/bootstrap/bootstrap-tab',
EventEmitter: 'lib/event_emitter/EventEmitter',
linkedin: ['//platform.linkedin.com/in.js?async=true',
'http://platform.linkedin.com/in.js?async=true'],
skinny: 'lib/skinny/skinny',
selectize: 'lib/selectize/selectize.min',
sifter: 'lib/sifter/sifter',
microplugin: 'lib/microplugin/microplugin.min'
},
shim: {
bootstrap: {
deps: ['jquery'],
},
bootstrapTab: {
deps: ['jquery', 'bootstrap'],
},
linkedin: {
exports: 'IN'
},
selectize: {
deps: ['jquery', 'sifter', 'microplugin']
},
'jquery.iframe-transport': {
deps: ['jquery']
}
}
});
require(['app'], function (App) {
App.initialize();
});
}());
define([], function () {
'use strict';
return function () {
require(['jquery', 'tmpl', 'load-image', 'canvas-to-blob',
'jquery.iframe-transport', 'jquery.fileupload-ui'], function ($) {
$('#product').fileupload({
url: '/products/create'
});
});
};
});
还值得注意的是，所有文件都已成功下载。无404等。一种可能修改垫片：
shim: {
bootstrap: {
deps: ['jquery'],
},
bootstrapTab: {
deps: ['jquery', 'bootstrap'],
},
linkedin: {
exports: 'IN'
},
selectize: {
deps: ['jquery', 'sifter', 'microplugin']
},
'jquery.iframe-transport': {
deps: ['jquery']
},
'jquery.fileupload-ui':{
deps: ['jquery']
}
另一个选项是将jquery降级为1.X（这是因为示例页面使用的是jquery 1.X）事实证明，load-image.js的缩小版本中存在一个缺陷，该缺陷破坏了依赖项的加载方式。我没有确切的证据来解释为什么，可能是较小的尺寸导致了比赛状态，或者可能是特定文件中的一些奇怪的东西。我所知道的是，缩小版本会导致随机错误，而正常版本不会（这是主控错误，所以我想我是在冒险） 我提出了一个建议 编辑：原来插件的缩小版包含了解释奇怪依赖行为的所有扩展 在这种情况下，来自的答案是最好的解决方案。非常感谢，它为我们节省了很多时间。 在requirejs.config中，必须逐个文件分别添加加载映像依赖项。 例如：
require.config({
'jquery.ui.widget' : 'lib/jQuery-File-Upload-9.9.2/js/vendor/jquery.ui.widget',
'jquery.fileupload':'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload',
'jquery.fileupload-ui': 'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-ui',
'jquery.fileupload-image': 'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-image',
'jquery.fileupload-validate':'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-validate',
'jquery.fileupload-audio':'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-audio',
'jquery.fileupload-video':'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-video',
'jquery.fileupload-process': 'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-process',
'jquery.fileupload-jquery-ui': 'lib/jQuery-File-Upload-9.9.2/js/jquery.fileupload-jquery-ui',
'jquery.iframe-transport': 'lib/jQuery-File-Upload-9.9.2/js/jquery.iframe-transport',
'load-image':'lib/load-image-1.10.0',
'load-image-meta':'lib/load-image-meta-1.10.0',
'load-image-ios':'lib/load-image-ios-1.10.0',
'load-image-exif':'lib/load-image-exif-1.10.0',
'canvas-to-blob':'lib/canvas-to-blob-2.0.5',
'tmpl':'lib/tmpl.2.4.1'
}
});
requirejs(['jquery',
'jquery.ui.widget',
'tmpl',
'load-image',
'jquery.iframe-transport',
'jquery.fileupload-ui'], function () {
$('#fileupload').fileupload({
url: 'photo-upload.html'
});
}
);
你能给我们看一下你的代码是什么导致了这个问题（通过链接到你的确切库），还是用小提琴重现这个问题？我使用了jquery文件上传，在requirejs中一点问题都没有。也许您可以显示require.config和代码？@mallim很高兴知道这一点。我会发布有问题的代码，我肯定这只是我忽略了的东西。@Fractaliste这是代码，如果我能提供任何其他信息，请告诉我。感谢您的关注。您的JavaScript代码是单独在该页面上还是其他东西也在加载jQuery？如果是后者，它可能是您的问题的解释。jquery的版本不应该是这里的问题。该插件实际上工作得很好，但在执行
require（）