我正在导入这样的文件
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 配置
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?
编译正常,但我在浏览器控制台中出现错误
app.js:1391 TypeError: $(...).fileupload is not a function
jQuery 是全局定义的看起来文件上传插件未注册。我不明白。
我也很难让它工作。我放弃了import
陈述,改用require
。起初,我尝试使用带有require的导入加载器。在我忘记之前,我认为您可以通过在适当的位置将以下内容添加到您的webpack.config.js
来解决您的直接问题:
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": 'jquery'
})
]);
这给我带来了其他问题,因为我已经jQuery
作为静态资产加载到站点上,并且我的模块正在其中注入。
但回到我的决心,避免所有这些痛苦。
使用imports-loader
,问题是依赖项的加载顺序,我无法webpack
和babel
行为。然后我发现了脚本加载器
安装script-loader
> npm install --save-dev script-loader
然后,我能够删除我的别名解析,因为它们不再需要。像魅力一样工作。很想听听关于更好方法的任何建议。
示例:主.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');