jquery-file-upload - 如何在webpack中使用blueimp-file-upload？

Question

我在网站上使用blueimp-file-upload，并且在使用webpack来组织我的js代码。

我从NPM安装了blueimp-file-upload和jquery.ui.widget

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

我需要在输入文件中添加blueimp-file-upload

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并使用Browser Global 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，blueimp-fileupload与angular集成的配置。另外，您可以在webpack.config.js中将其配置为正则表达式，以避免重复加载程序。