Question

好的-到目前为止，我100％确信完全使用webpack的决定是我的错-尽管如此，我需要一个解决方案并且无法提出建议。

我只想使用与npm一起安装的jquery插件。

它是这样的： https://github.com/davidjbradshaw/image-map-resizer

因此，我在输入脚本中添加了以下内容：

import "image-map-resizer";

我在前端遇到的错误：

TypeError: "$(...).imageMapResize is not a function"

好的-插件不是ES6，只是搜索window.jQuery属性-webpack用__webpack_provided_window_dot_jQuery替换了此属性，因为我必须为其他jquery插件添加一些配置：

webpack配置

const webpack = require('webpack');
const path = require('path');

var config = {
    entry: {
        app: './src/js/app.js',
        map: './src/js/map.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/public/static/js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules\/easy-autocomplete/,
                query: {
                    presets: [
                        'es2015',
                        'react',
                        'flow',
                    ],
                    'cacheDirectory': true
                }
            }
        ]
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // @see https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.$": "jquery",
            "window.jQuery": "jquery"
        }),
    ],
    resolve: {
        modules: [
            'node_modules',
            path.resolve(__dirname, 'src/js'),
        ],
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat',
        }
    },
    mode: 'development' // will be set to production in gulpfile
};

module.exports = config;

要使所有功能正常运行，我还需要将其添加到我的app.js输入脚本中

// libraries
const $ = require("jquery");
global.jQuery = global.$ = $;

所以-要解决这个问题，我只需要webpack而不替换该插件中的window.jQuery ...

在这一点上，我放弃了webpack-我不想再在任何项目中使用它了-它太复杂，太脆弱，太受配置驱动了并且增加了捆绑包的大小。就我的目的而言，这是一个非常糟糕的选择。

但是我已经集成了它，需要使它正常工作...

我想念什么？

jQuery插件和Webpack

0 个答案: