在webpack中导入Blueimp jQuery文件上传

我正在导入这样的文件

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是全局定义的，看起来像fileupload插件没有注册。 我不明白。

Answer 1

我也很难尝试让它发挥作用。 我放弃了import语句，而是使用了require 。 起初，我尝试使用带有require的imports-loader 。 在我忘记之前，我认为您可以通过在适当的位置将以下内容添加到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 

然后我就可以删除我的别名，因为它们不再需要了。 像魅力一样工作。 很想听听有关更好方法的任何建议。

示例： 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');