Comment importer jquery dans webpack

Question

J'ai un problème avec jquery lorsque je l'utilise avec webpack. Mon code :

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    entry: {
        vendor: [
            './src/main/webapp/js/vendor/jquery-3.3.1.min.js',
            // './src/main/webapp/js/vendor/fs.js',
            './src/main/webapp/js/vendor/google-adsense.js',
            './src/main/webapp/js/vendor/jquery.menu-aim.min.js',
            './src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
        ],
        app: './src/main/assets/js/desktop/app.js',
        mobile: './src/main/assets/js/mobile/app.js',
        touch: './src/main/assets/js/touch/app.js',
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader?jQuery!expose-loader?$'
            }
        ],
    },
    plugins: [
        // new CleanWebpackPlugin(['src/main/webapp/assets']),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common' // Specify the common bundle's name.
        }),
        new UglifyJsPlugin({
            test: /\.js$/,
            sourceMap: process.env.NODE_ENV === "development"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './src/main/webapp/js')
    }
};

Lorsque le code ci-dessus est compilé, la console affiche cette erreur.

vendor.js:1 Uncaught ReferenceError : webpackJsonp n'est pas défini at vendor.js:1

Et quand j'essaie d'utiliser ce

externals: {
  jquery: 'jQuery'
}

Il jette

vendor.js:1 Uncaught ReferenceError: jQuery is not defined
    at Object.231 (vendor.js:1)
    at o (common.js:1)
    at Object.228 (vendor.js:1)
    at o (common.js:1)
    at window.webpackJsonp (common.js:1)
    at vendor.js:1

Et j'utilise jquery dans mon fichier js principal. import $ from 'jquery' . Qu'est-ce que j'ai fait de mal ? Je vous remercie.

Answer 1

Il y a donc quelques thèmes dans votre webpack.config.js dont certaines sont contradictoires. Je vais simplement les énumérer pour mieux comprendre ce que je pense que vous essayez d'obtenir.

Thème 1

Vous avez une entrée appelée vendor qui fait clairement référence à une bibliothèque jQuery miniaturisée que vous avez vraisemblablement téléchargée et placée dans le répertoire spécifié.

Thème 2

Vous disposez également d'un expose-loader qui est essentiel en exposant le jquery de sa bibliothèque node_modules probablement dans la liste des dependencies de votre package.json .

Cela rend le jquery en el node_modules disponible en tant que $ y jQuery dans la portée globale de la page où votre paquet est inclus.

Thème 3

Vous avez également inclus le ProvidePlugin avec une configuration pour jQuery.

En ProvidePlugin est censé injecter les dépendances dans le champ d'application du code de votre module, ce qui signifie que vous n'avez pas besoin de disposer de import $ from 'jquery' au lieu de $ y jQuery sera déjà disponible dans tous vos modules.

Conclusion

D'après ce que j'ai compris Je pense vous essayez d'empaqueter jQuery à partir du fichier statique à ./src/main/webapp/js/vendor/jquery-3.3.1.min.js dans une offre groupée de fournisseurs.

Vous essayez alors d'exposer les bibliothèques du paquet de fournisseurs à la portée globale (jQuery).

Ensuite, il faut également que le code de votre application puisse importer jQuery à partir de ce qui est mis à disposition par l'offre groupée du fournisseur dans la portée globale.

Réponse :

Si c'est ce que vous faites, vous devez donc prendre les mesures suivantes.

Tout d'abord, vérifiez dans votre package.json fichiers dependencies pour jquery . Si elle est là, vous voulez l'enlever, elle n'est pas nécessaire si vous allez utiliser votre jquery-3.3.1.min.js pour fournir jQuery à votre application.

Deuxièmement, changez votre test de la expose-loader qui se déclenche lorsqu'il voit votre jquery-3.3.1.min.js dans vos entrées, et non pas le résoudre à partir de l'application jquery de votre node_modules .

Ce modèle regex devrait faire l'affaire.

{
  test: /jquery.+\.js$/,
  use: [{
      loader: 'expose-loader',
      options: 'jQuery'
  },{
      loader: 'expose-loader',
      options: '$'
  }]
}

Troisièmement, retirez le ProvidePlugin si vous comptez importer la bibliothèque explicitement avec import $ from 'jquery' vous n'en avez pas besoin.

Enfin, vous devez indiquer à webpack quand il voit un import pour jquery il peut résoudre ce problème à partir de window.jQuery dans la portée globale. Vous pouvez le faire avec la configuration externals que vous avez déjà référencée.

externals: {
  jquery: 'jQuery'
}

Avec tous ces changements, vous devriez vous retrouver avec une webpack.config.js qui ressemble à ceci.

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    entry: {
        vendor: [
            './src/main/webapp/js/vendor/jquery-3.3.1.min.js',
            // './src/main/webapp/js/vendor/fs.js',
            './src/main/webapp/js/vendor/google-adsense.js',
            './src/main/webapp/js/vendor/jquery.menu-aim.min.js',
            './src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
        ],
        app: './src/main/assets/js/desktop/app.js',
        mobile: './src/main/assets/js/mobile/app.js',
        touch: './src/main/assets/js/touch/app.js',
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /jquery.+\.js$/,
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                },{
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ],
    },
    plugins: [
        // new CleanWebpackPlugin(['src/main/webapp/assets']),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common' // Specify the common bundle's name.
        }),
        new UglifyJsPlugin({
            test: /\.js$/,
            sourceMap: process.env.NODE_ENV === "development"
        })
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './src/main/webapp/js')
    },
    externals: {
        jquery: 'jQuery'
    }
};

J'espère que cela ne vous donne pas seulement la réponse, mais aussi une explication suffisante pour savoir où vous vous êtes trompé.