Загрузить blue-imp jquery-файл с помощью RequireJS
Я пытаюсь загрузить файл jquery с помощью blue-imp с помощью RequireJS.
Я столкнулся с некоторой проблемой при загрузке. Я пробовал решения, подобные этому и этому, но никто не работал с моей ситуацией.
что я сделал в своем 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"
}
}
Даже после этого я получаю ту же ошибку. Он выбирает неправильный путь.
Какие-либо предложения или подходы, чтобы продолжить?
2 ответа
По этой причине вы не можете использовать конфигурацию shim с jquery fileupload ( конфигурация shim):
//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 ($, ...) {
Ваша конфигурация противоречиво ссылается на ваш модуль с именем jqueryfileupload
(в вашем paths
) и с jqueryFileUpload
(в вашем shim
и в вашем звонке define
). Вы можете изменить свой paths
использоватьjqueryFileUpload
так что это везде одинаково.
Когда вы говорите RequireJS о модуле, вы должны ссылаться на него с одинаковым именем везде. Что касается RequireJS, foo
, FOO
, Foo
, FoO
все разные модули.