jquery - 在 webpack 中导入 Blueimp jQuery 文件上传

Question

我正在导入这样的文件

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 配置

resolve: {
    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',
        'load-image-scale': 'blueimp-load-image/js/load-image-scale.js',
        'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
        'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
    }
}

受此启发:How to use blueimp-file-upload with webpack?

编译正常，但我在浏览器控制台中收到错误

app.js:1391 TypeError: $(...).fileupload is not a function

jQuery 是全局定义的看起来 fileupload 插件没有注册。我不明白。

Answer 1

我也很难让它发挥作用。我放弃了 import 语句并使用 require 代替。起初，我尝试使用 imports-loader与要求。在我忘记之前，我认为您可以通过将以下内容添加到 webpack.config.js 的适当位置来解决您眼前的问题:

module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": 'jquery'
    })      
]);

这给我带来了其他问题，因为我已经将 jQuery 作为静态资源加载到网站上，并且我的模块被注入(inject)其中。

但回到我的决心，避免所有这些痛苦。

使用 imports-loader 时，问题在于依赖项的加载顺序，我无法让 webpack 和 babel 正常工作。然后我发现script-loader

安装脚本加载器

> npm install --save-dev script-loader

然后我就可以删除我的别名解析，因为不再需要它们。像魅力一样工作。希望听到有关更好方法的任何建议。

示例:ma​​in.js

require('script-loader!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
require('script-loader!blueimp-tmpl/js/tmpl.js');
require('script-loader!blueimp-load-image/js/load-image.all.min.js');
require('script-loader!blueimp-canvas-to-blob/js/canvas-to-blob.js');
require('script-loader!blueimp-file-upload/js/jquery.iframe-transport.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-process.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-image.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-audio.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-video.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-validate.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-ui.js');