如何将 blueimp-file-upload 与 webpack 一起使用?

2024-04-05

我在我的网站中使用 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 

如果您正在处理图像:

Webpack 抱怨某些模块不在 blueimp-file-upload 包中。这是我让它工作的方法:

安装缺少的依赖项:

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";
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 blueimp-file-upload 与 webpack 一起使用? 的相关文章

随机推荐