可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
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:
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" } },
回答6:
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
回答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" }