我在我的网站上使用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
禁用AMD和CommonJS并使用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');
这是我用来集成webpack,blueimp-fileupload和angular的配置。或者,您可以在webpack.config.js中配置为正则表达式,以避免重复加载器。
Webpack抱怨一些不在blueimp-file-upload包中的模块。这是我的工作方式:
npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob
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";
resolve: {
extensions: ['', '.js'],
alias: {
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
}
jquery.fileupload.js
首先检查AMD是否需要导致此错误。你可以教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
你可以在jquery.ui.widget的主文件中添加一个别名 - 遗憾的是它没有在package.json中指定一个别名,所以webpack无法找到它。
resolve: {
alias: {
"jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
}
},
实际上你可以通过改变你的webpack配置来解决这个问题,只需添加要解决的路径(例如我正在使用bower)
resolve: {
extensions: [ '', '.js', '.jsx' ],
modulesDirectories: [
'node_modules',
'bower_components',
'bower_components/blueimp-file-upload/js/vendor'
]
}
在webpack 3.x中,语法如下所示:
{
test: require.resolve("blueimp-file-upload"),
use: "imports-loader?define=>false"
}
首先安装两个插件
npm i blueimp-file-upload --save
npm i jquery-ui --save
然后需要在网络包中
require('blueimp-file-upload/js/jquery.fileupload')