blueimp/ jQuery-File-Upload一个小问题 Can't resolve 'load-image-meta' 'load-image-exif' load-image-scale

在导入 blueimp-file-upload/js/jquery.fileupload.js 这个的时候,不考虑预览上传前图片,只使用最小化配置不会有问题。


但是导入blueimp-file-upload/js/jquery.fileupload-ui.js 因为这个文件导入了 jquery.fileupload-image这个包,这个包里就有load-*的这几个包,还有jquery-ui/ui/widget,但是这几个包写的是别名,因为找不到所以就报错了。

blueimp/ jQuery-File-Upload报错 Can't resolve 'load-image-meta' 'load-image-exif' load-image-scale  这几个都找不到,还有很多都找不到。


但是在webpack里配置resolve.alias 别名一样还是会报错。

看了一眼源码

define([
'jquery',
'load-image',
'load-image-meta',
'load-image-scale',
'load-image-exif',
'canvas-to-blob',
'./jquery.fileupload-process'
], factory);
#把路径给它加上 blueimp-load-image/js 后,webpack可以打包但是并不能使用,因为这些包都没法解析。

这些代码是在AMD模式下的,需要把这个给它禁用了,这里需要借助一个loader,前置变量imports-loader,这个loader用在jquery上较多,因为很多插件都依懒它,为了保证项目顺利,都需要配置jquery前置,这样插件就不会提示 $ ..  is not define   not fount 这种类似找不到或者未定义的错误提示。

这货还可以用来禁用AMD模式。

因为好多模块都是先检查AMD 模式,这是出错的主要原因,像下面这样子

#先检查AMD再检查CMD,webpack支持AMD所以 到AMD这儿不往后检查了,问题就出在这儿了。
;(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// Register as an anonymous AMD module:
define([
'jquery',
'jquery-ui/ui/widget'
], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS:
factory(
require('jquery'),
require('./vendor/jquery.ui.widget')
);
} else {
// Browser globals:
factory(window.jQuery);
}

解决方法:

#增加这个配置 就行了
{
  test: require.resolve("blueimp-file-upload"),
  use: "imports-loader?define=>false"
}
#或,像这样子加载它,但是这里路径要正确
require('imports?define=>false!jquery.fileupload.js')

改完后就能够正常编译了。

Tags javascript 建站

留言(0)

评论