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

- Littlee

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

- Matheus Dal'Pizzol

---

非常感谢，这个很有效。我需要添加这一行来解决 -> alias as well: 'load-image-scale': 'blueimp-load-image/js/load-image-scale.js', - Yolo

对我来说，这个答案最有帮助。但是最近的版本需要 load-image-scale 别名，就像 Yolo 说的那样。除此之外，你还需要将 jquery-ui/widget 别名更改为 jquery-ui/ui/widget。 - Thijs

最新版本的Webpack不喜欢config.resolve.extensions[0]这样的写法。https://dev59.com/nloU5IYBdhLWcg3wYWIM#42377085 - crenshaw-dev

我还需要添加'load-image-orientation': 'blueimp-load-image/js/load-image-orientation.js'。 - Julien

我们不得不添加更多的别名：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', 'load-image-orientation': 'blueimp-load-image/js/load-image-orientation.js', 'load-image-scale': 'blueimp-load-image/js/load-image-scale.js', 'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js', 'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js' }, - Rikard

Answer 2

禁用 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、blueimp-fileupload和angular集成的配置。或者你可以将其作为一个正则表达式在webpack.config.js中进行配置，以避免重复加载器。

- Gowrav

---

还有一点需要注意的是，您可以使用提供的插件webpack.ProvidePlugin({ "window.jQuery": "jquery" })来提供jquery给blueimp。更多信息请参见此处。 - Paul Gray

额外说明，需要使用“imports”加载器：npm i --save-dev imports-loader。 - jebbie

什么是“浏览器全局jQuery”？ - activedecay

浏览器全局jQuery意味着jQuery可在window命名空间上使用。 - Gowrav

我正在使用所有的高级功能，但在依赖顺序方面遇到了问题。找到了 script-loader。这可能会对某些人有所帮助：https://stackoverflow.com/a/48236429/1447679 - user1447679

Answer 3

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

- fewspider

---

虽然这段代码可以解决问题，但是包括解释可以真正帮助提高您的帖子质量。请记住，您正在回答未来读者的问题，这些人可能不知道你提出代码建议的原因。同时，请尽量不要在代码中添加过多的解释性注释，这会降低代码和解释的可读性！ - kayess

这个库的新版本需要使用以下代码替代原来的代码：'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js' - Dave Lancea

Answer 4

我遇到了几乎相同的问题，只不过错误提示不是'jquery.ui.widget'而是'jquery/ui/widget'。

对我来说，@Gowrav的回答是错误的方法。

经过数天的探索，我简单地解决了它。只需要执行以下操作：

npm install jquery-ui

事实是，jquery.fileupload.js正在寻找它的供应商：

但在尝试导入依赖项的上下文中，它当然找不到（解析）。因此，我将其添加到项目中。
P.S. 这只是我的关于所有工作方式的观点。但这种方式帮助了我。

- g1un

Answer 5

jquery.fileupload.js 首先检查 AMD require，这导致出现错误。您可以教 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

- franky

---

我尝试使用imports-loader，但在jquery.fileupload.js文件中，它只需要jquery和jquery.ui.widget，但我需要引入更多的文件，比如tmpl.min.js、load-image.all.min.js、canvas-to-blob.min.js、jquery.blueimp-gallery.min.js、jquery.iframe-transport.js、jquery.fileupload.js、jquery.fileupload-process.js、jquery.fileupload-image.js、jquery.fileupload-validate.js、jquery.fileupload-ui.js。我该怎么办？（官方网站上的演示需要我提到的所有文件） - Littlee

虽然我自己没有尝试过，但你列出的许多模块似乎都可以在这里找到：https://www.npmjs.com/search?q=blueimp - franky

只有部分模块能在 npm 上找到， 像 jquery.fileupload-process.js 这样的文件与 jquery.fileupload.js 在同一个文件夹中，我不知道如何 require 它。require('imports?define=>false!blueimp-file-upload/jquery.fileupload-process.js') 是错误的。 - Littlee

Answer 6

您可以为jquery.ui.widget的主文件添加别名-不幸的是，它在其package.json中没有指定别名，因此webpack无法找到它。

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

- Stephen Saucier

Answer 7

首先安装两个插件

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

然后在 Webpack 中使用 require。

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

- Vahid Alvandi

Answer 8

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

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

- Sri

Answer 9

实际上，您可以通过更改webpack配置来解决此问题，只需添加解析路径（例如我正在使用bower）

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

- kevinzhow