如何在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

如果您正在处理图片：

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

Answer 2

禁用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中配置为正则表达式，以避免重复加载器。

Answer 3

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

Answer 4

我有几乎完全相同的问题，除了错误宣布没有＆＃39; jquery.ui.widget＆＃39;但是＆＃39; jquery / ui / widget＆＃39;。
对我来说@Gowrav的回答是错误的。

经过几天的迷恋，我以简单的方式解决了这个问题。刚做过：

npm install jquery-ui

事实是jquery.fileupload.js搜索其供应商：

但是在jquery.fileupload.js尝试导入依赖关系的上下文中，当然无法找到（解析）它。所以我把它添加到项目中。

P.S。这是我对如何运作的看法。但这种方式对我有所帮助。

Answer 5

jquery.fileupload.js首先检查AMD是否需要导致此错误。你可以教webpack不要在这个文件中使用AMD风格。 （确保npm install imports-loader使此方法有效。）：

require('imports?define=>false!blueimp-file-upload')

它应该正确地将模块注册为CommonJS，并且需要来自正确位置的jquery.ui.widget。

在此处阅读更多内容：http://webpack.github.io/docs/shimming-modules.html#disable-some-module-styles

Answer 6

您可以在jquery.ui.widget的主文件中添加别名 - 遗憾的是，它的package.json中没有指定别名，所以webpack无法找到它。

resolve: {
    alias: {
        "jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
    }
},

Answer 7

实际上你可以通过更改webpack配置来解决这个问题，只需添加解析路径（例如我使用的是凉亭）

resolve: {
    extensions: [ '', '.js', '.jsx' ],
    modulesDirectories: [
       'node_modules',
       'bower_components', 
       'bower_components/blueimp-file-upload/js/vendor' 
    ]
}

Answer 8

在webpack 3.x中，语法如下所示：

  {
    test: require.resolve("blueimp-file-upload"),
    use: "imports-loader?define=>false"
  }

Answer 9

首先安装两个插件

npm i blueimp-file-upload --save
npm i jquery-ui --save

然后在Web Pack中需要

require('blueimp-file-upload/js/jquery.fileupload')