如何在 webpack 中使用 blueimp-file-upload?
How to use blueimp-file-upload with webpack?
我在我的网站中使用了 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
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
禁用 AMD 和 CommonJS 并使用全局浏览器 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配置来解决这个问题,只需添加解析路径(例如我使用的是bower)
resolve: {
extensions: [ '', '.js', '.jsx' ],
modulesDirectories: [
'node_modules',
'bower_components',
'bower_components/blueimp-file-upload/js/vendor'
]
}
您可以在 jquery.ui.widget 的主文件中添加一个别名 - 不幸的是它没有在其 package.json 中指定别名,否则 webpack 无法找到它。
resolve: {
alias: {
"jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
}
},
resolve: {
extensions: ['', '.js'],
alias: {
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
}
如果您正在处理图像:
Webpack 抱怨一些模块不在 blueimp-file-upload 包中。这是我的工作方式:
安装缺少的依赖项:
npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob
配置 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'
}
};
在您的应用中包含脚本:
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";
在 webpack 3.x 中,语法将如下所示:
{
test: require.resolve("blueimp-file-upload"),
use: "imports-loader?define=>false"
}
我有几乎相同的问题,除了错误宣布不是 'jquery.ui.widget' 而是 'jquery/ui/widget'。
对我来说,@Gowrav 的回答是错误的。
经过几天的摸索,我用简单的方法解决了它。刚刚做了:
npm install jquery-ui
事实是 jquery.fileupload.js 搜索其供应商:
但是在 jquery.fileupload.js 尝试导入依赖的上下文中,当然找不到(解决)。所以我将它添加到项目中。
P.S。这只是我对所有工作方式的看法。但是这种方式对我有帮助。
先安装两个插件
npm i blueimp-file-upload --save
npm i jquery-ui --save
然后在 web pack 中 require
require('blueimp-file-upload/js/jquery.fileupload')
我在我的网站中使用了 blueimp-file-upload,我正在使用 webpack 来组织我的 js 代码。
我从 NPM
安装了 blueimp-file-upload 和 jquery.ui.widgetnpm 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
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
禁用 AMD 和 CommonJS 并使用全局浏览器 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配置来解决这个问题,只需添加解析路径(例如我使用的是bower)
resolve: {
extensions: [ '', '.js', '.jsx' ],
modulesDirectories: [
'node_modules',
'bower_components',
'bower_components/blueimp-file-upload/js/vendor'
]
}
您可以在 jquery.ui.widget 的主文件中添加一个别名 - 不幸的是它没有在其 package.json 中指定别名,否则 webpack 无法找到它。
resolve: {
alias: {
"jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
}
},
resolve: {
extensions: ['', '.js'],
alias: {
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
}
如果您正在处理图像:
Webpack 抱怨一些模块不在 blueimp-file-upload 包中。这是我的工作方式:
安装缺少的依赖项:
npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob
配置 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'
}
};
在您的应用中包含脚本:
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";
在 webpack 3.x 中,语法将如下所示:
{
test: require.resolve("blueimp-file-upload"),
use: "imports-loader?define=>false"
}
我有几乎相同的问题,除了错误宣布不是 'jquery.ui.widget' 而是 'jquery/ui/widget'。
对我来说,@Gowrav 的回答是错误的。
经过几天的摸索,我用简单的方法解决了它。刚刚做了:
npm install jquery-ui
事实是 jquery.fileupload.js 搜索其供应商:
但是在 jquery.fileupload.js 尝试导入依赖的上下文中,当然找不到(解决)。所以我将它添加到项目中。
P.S。这只是我对所有工作方式的看法。但是这种方式对我有帮助。
先安装两个插件
npm i blueimp-file-upload --save
npm i jquery-ui --save
然后在 web pack 中 require
require('blueimp-file-upload/js/jquery.fileupload')