在webpack中导入Blueimp jQuery文件上传 [英] import Blueimp jQuery File Upload in webpack

问题描述

我正在导入这样的文件

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

and altered webpack config with

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'
    }
}

受此启发：如何在webpack上使用blueimp-file-upload？

它正在编译好，但我在浏览器控制台中出错

it is compiling ok, but i get error in browser console

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

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

jQuery is defined globally looks like fileupload plugin is not registered. i don't get it.

推荐答案

我也很难尝试让它发挥作用。我放弃了 import 语句，而是使用了 require 。起初，我尝试使用 imports-loader with require。在我忘记之前，我认为您可以通过在适当的地方将 webpack.config.js 添加到以下内容来解决您的问题：

I too had a difficult time trying to get this to work. I gave up on import statements and used require instead. At first, I tried to use imports-loader with require. Before I forget, I think you can solve your immediate problem by adding the following to your webpack.config.js in the appropriate place:

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

这导致了我已经有的其他问题 jQuery 在网站上作为静态资产加载，我的模块正在其中注入。

This caused me other issues as I already had jQuery loaded as a static asset on the site, and my module was being injected within it.

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

But back to my resolution to avoid all of this pain.

使用进口-loader ，问题是依赖项的加载顺序，我无法获得 webpack 和 babel 表现。然后我发现脚本加载器

With imports-loader, the problem is the load order of dependencies and I couldn't get webpack and babel to behave. Then I discovered script-loader

安装 script-loader

> npm install --save-dev script-loader

然后我能够删除我的别名不再需要了。像魅力一样工作。很想听听有关更好方法的任何建议。

I was then able to remove my alias resolves as they were no longer needed. Working like a charm. Would love to hear any suggestions on a better method.

示例： main.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');

这篇关于在webpack中导入Blueimp jQuery文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！