How to use blueimp-file-upload with webpack?

前端 未结 9 1939
无人共我
无人共我 2021-02-05 08:46

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



        
相关标签:
9条回答
  • 2021-02-05 08:47
    resolve: {
        extensions: ['', '.js'],
        alias: {
            'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
        }
    }
    
    0 讨论(0)
  • 2021-02-05 08:52

    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' 
        ]
    }
    
    0 讨论(0)
  • 2021-02-05 08:56

    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";
    
    0 讨论(0)
  • 2021-02-05 08:58

    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.

    0 讨论(0)
  • 2021-02-05 09:00

    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.

    0 讨论(0)
  • 2021-02-05 09:06

    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

    0 讨论(0)
提交回复
热议问题