在webpack中导入Blueimp jQuery文件上传 [英] import Blueimp jQuery File Upload in webpack
问题描述
我正在导入这样的文件
import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
import "blueimp-file-upload/js/jquery.iframe-transport.js";
import "blueimp-file-upload/js/jquery.fileupload.js";
import "blueimp-file-upload/js/jquery.fileupload-image.js";
并更改了webpack配置
and altered webpack config with
resolve: {
alias: {
'load-image': 'blueimp-load-image/js/load-image.js',
'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
'load-image-scale': 'blueimp-load-image/js/load-image-scale.js',
'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
}
受此启发:如何在webpack上使用blueimp-file-upload?
它正在编译好,但我在浏览器控制台中出错
it is compiling ok, but i get error in browser console
app.js:1391 TypeError: $(...).fileupload is not a function
jQuery是全局定义的
看起来像fileupload插件没有注册。我不明白。
jQuery is defined globally looks like fileupload plugin is not registered. i don't get it.
推荐答案
我也很难尝试让它发挥作用。我放弃了 import
语句,而是使用了 require
。起初,我尝试使用 imports-loader with require。在我忘记之前,我认为您可以通过在适当的地方将 webpack.config.js
添加到以下内容来解决您的问题:
I too had a difficult time trying to get this to work. I gave up on import
statements and used require
instead. At first, I tried to use imports-loader with require. Before I forget, I think you can solve your immediate problem by adding the following to your webpack.config.js
in the appropriate place:
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": 'jquery'
})
]);
这导致了我已经有的其他问题 jQuery
在网站上作为静态资产加载,我的模块正在其中注入。
This caused me other issues as I already had jQuery
loaded as a static asset on the site, and my module was being injected within it.
但回到我的决心以避免所有这些痛苦。
But back to my resolution to avoid all of this pain.
使用进口-loader
,问题是依赖项的加载顺序,我无法获得 webpack
和 babel
表现。然后我发现脚本加载器
With imports-loader
, the problem is the load order of dependencies and I couldn't get webpack
and babel
to behave. Then I discovered script-loader
安装 script-loader
> npm install --save-dev script-loader
然后我能够删除我的别名不再需要了。像魅力一样工作。很想听听有关更好方法的任何建议。
I was then able to remove my alias resolves as they were no longer needed. Working like a charm. Would love to hear any suggestions on a better method.
示例: main.js
require('script-loader!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
require('script-loader!blueimp-tmpl/js/tmpl.js');
require('script-loader!blueimp-load-image/js/load-image.all.min.js');
require('script-loader!blueimp-canvas-to-blob/js/canvas-to-blob.js');
require('script-loader!blueimp-file-upload/js/jquery.iframe-transport.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-process.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-image.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-audio.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-video.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-validate.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-ui.js');
这篇关于在webpack中导入Blueimp jQuery文件上传的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!