How to use blueimp-file-upload with webpack?

问题

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

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

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

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

require('blueimp-file-upload')

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

回答1:

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');

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.

回答2:

If you're working with images:

Webpack was complaining about some modules that weren't in the blueimp-file-upload package. Here is the way I got this working:

Install missing dependencies:

npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob

Configure 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'
   }
};

Include scripts in your app:

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

回答3:

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

回答4:

I had almost identical problem, except that Error announced not 'jquery.ui.widget' but 'jquery/ui/widget'.
For me @Gowrav answer was wrong way.

After days of straying I've solved it in the simple way. Just did:

npm install jquery-ui

The fact is that jquery.fileupload.js searching for its vendor:

But in context where jquery.fileupload.js is trying to import dependency, of course, it can't be found (resolved). So I add it to project instead.

P.S. It's just my opinion about how does all work. But this way has helped me.

回答5:

jquery.fileupload.js checks for AMD require first which results in this error. You can teach webpack not to use AMD style for this file. (Make sure to npm install imports-loader for this method to work.):

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

It should correctly register the module as CommonJS and will require the jquery.ui.widget from the right location.

Read more here: http://webpack.github.io/docs/shimming-modules.html#disable-some-module-styles

回答6:

You can add an alias to jquery.ui.widget's main file - it unfortunately doesn't specify one in its package.json, so webpack can't find it otherwise.

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

回答7:

actually you can solve this by changing your webpack config, just add the path to resolve (for example I am using bower)

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

回答8:

In webpack 3.x, the syntax will look like this:

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

回答9:

first install two plugins

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

then require in web pack

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

来源：https://stackoverflow.com/questions/31849476/how-to-use-blueimp-file-upload-with-webpack

标签

jquery-file-upload

Webpack