如何在webpack中使用blueimp-file-upload? [英] How to use blueimp-file-upload with webpack?

问题描述

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

I'm using blueimp-file-upload in my website, and I'm using webpack to organize my js code.

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

I installed blueimp-file-upload and jquery.ui.widget from NPM

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

并且我需要在输入文件中添加blueimp-file-up

and I require blueimp-file-upload in my entry file

require('blueimp-file-upload')

但是当我运行webpack时，出现错误:

but when I run webpack, I get thie error:

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 

推荐答案

同时禁用AMD和CommonJS并使用浏览器全局jQuery".

Disable both AMD and CommonJS and use the 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中将其配置为正则表达式，以避免重复加载程序.

This is the configuration I'm using to integrate webpack, blueimp-fileupload with angular. Alternatively you can configure in your webpack.config.js as a regex to avoid repeating loaders.

这篇关于如何在webpack中使用blueimp-file-upload?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！