jquery-file-upload - ejemplo - jquery file upload timeout

¿Cómo usar blueimp-file-upload con webpack?

Question

Estoy usando blueimp-file-upload en mi sitio web, y estoy usando webpack para organizar mi código js.

Instalé blueimp-file-upload y jquery.ui.widget desde NPM

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

y requiero cargar blueimp-file en mi archivo de entrada

require(''blueimp-file-upload'')

pero cuando ejecuto webpack, recibo ese 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 

Answer 1

Si estás trabajando con imágenes:

Webpack se quejaba de algunos módulos que no estaban en el paquete blueimp-file-upload. Esta es la forma en que conseguí este trabajo:

Instalar dependencias faltantes:

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

Configurar el paquete web:

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

Incluye scripts en tu aplicación:

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

Deshabilite AMD y CommonJS y use el navegador 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'');

Esta es la configuración que estoy usando para integrar webpack, blueimp-fileupload con angular. Alternativamente, puede configurar en su webpack.config.js como una expresión regular para evitar la repetición de los cargadores.

Answer 3

En el paquete web 3.x, la sintaxis se verá así:

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

Answer 4

Puede agregar un alias al archivo principal de jquery.ui.widget; desafortunadamente, no especifica uno en su package.json, por lo que el webpack no puede encontrarlo de otra manera.

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

Answer 5

Tuve un problema casi idéntico, excepto que el error anunció no ''jquery.ui.widget'' sino ''jquery / ui / widget''.
Para mí la respuesta de @Gowrav fue de manera incorrecta.

Después de días de extravío, lo he resuelto de manera simple. Acaba de hacer:

npm install jquery-ui

El hecho es que jquery.fileupload.js busca su proveedor:

Pero en el contexto donde jquery.fileupload.js está intentando importar dependencia, por supuesto, no se puede encontrar (resolver). Así que lo agrego al proyecto en su lugar.

PD Es solo mi opinión acerca de cómo funciona todo. Pero de esta manera me ha ayudado.

Answer 6

en realidad, puede resolver esto cambiando la configuración de su paquete web, solo agregue la ruta a resolver (por ejemplo, estoy usando Bower)

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

Answer 7

primero instala dos plugins

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

luego requiere en paquete web

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

Answer 8

jquery.fileupload.js comprobaciones de jquery.fileupload.js para AMD requieren primero lo que resulta en este error. Puede enseñar a un paquete web que no use el estilo de AMD para este archivo. (Asegúrese de que npm install imports-loader para que este método funcione):

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

Debe registrar correctamente el módulo como CommonJS y requerirá el jquery.ui.widget desde la ubicación correcta.

Lea más aquí: http://webpack.github.io/docs/shimming-modules.html#disable-some-module-styles

Answer 9

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