如何与webpack一起使用blueimp文件上传？

Question

我在我的网站上使用blueimp文件上传，我用webpack组织我的js代码。

我安装了NPM的blueimp文件上传和jquery.ui.widget。

npm install --save blueimp-file-upload
npm install --save jquery.ui.widget

我需要在我的输入文件中上传blueimp文件

require('blueimp-file-upload')

但是当我运行webpack的时候，我得到了一个错误：

ERROR in ./~/blueimp-file-upload/js/jquery.fileupload.js
Module not found: Error: Cannot resolve module 'jquery.ui.widget' in E:\app-parent\cooka-common-web\src\main\resources\static\node_modules\blueimp-file-upload\js
@ ./~/blueimp-file-upload/js/jquery.fileupload.js 19:8-22:19 

Answer 1

禁用AMD和CommonJS，并使用浏览器全局jQuery。

/* The jQuery UI widget factory, can be omitted if jQuery UI is already included */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
/* The Iframe Transport is required for browsers without support for XHR file uploads */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.iframe-transport.js');
/* The basic File Upload plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
/* The File Upload processing plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-process.js');
/* The File Upload validation plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-validate.js');
/* The File Upload Angular JS module */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-angular.js');

这是我用来整合webpack的配置，蓝鳍状体和角度。或者，您可以在webpack.config.js中将其配置为正则表达式，以避免重复加载。

Answer 2

如果您正在处理图像：

Webpack抱怨一些模块没有出现在blueimp文件上传包中。我的工作方式如下：

安装缺少的依赖项：

npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob

配置Webpack：

config.resolve = {
   extensions: ['', '.js'],
   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',
      'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
      'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
   }
};

在应用程序中包含脚本：

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";

Answer 3

resolve: {
    extensions: ['', '.js'],
    alias: {
        'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
    }
}