web-dev-qa-db-fra.com

Exposer jQuery à un objet Window réel avec Webpack

Je ne souhaite pas exposer l'objet jQuery à l'objet window global accessible dans la console du développeur dans le navigateur. Maintenant, dans ma configuration webpack, j'ai les lignes suivantes:

plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery'
                })
            ]

Ces lignes ajoutent les définitions jQuery à chaque fichier dans les modules de mon webpack. Mais lorsque je construis le projet et que j'essaie d'accéder à jQuery dans la console du développeur, procédez comme suit:

window.$;
window.jQuery;

il dit que ces propriétés ne sont pas définies ...

Y'a t'il un moyen d'arranger cela?

javascriptjquerywebpack
101
ferbolg

Vous devez utiliser le expose-loader .

npm install expose-loader --save-dev

Vous pouvez le faire quand vous en avez besoin:

require("expose?$!jquery");

ou vous pouvez le faire dans votre config:

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

UPDATE: à partir de Webpack 2, vous devez utiliser expose-loader au lieu de expose :

module: {
    rules: [{
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: '$'
        }]
    }]
}
125
Matt Derrick

ProvidePlugin remplace un symbole dans une autre source via l'importation respective, mais n'expose pas le symbole dans l'espace de noms global. Un exemple classique sont les plugins jQuery. La plupart d'entre eux s'attendent à ce que jQuery soit défini globalement. Avec la variable ProvidePlugin, vous vous assurez que jQuery est une dépendance (chargée auparavant, par exemple) et que l'apparition de jQuery dans leur code est remplacée par l'équivalent brut de webpack require('jquery').

Si vous avez des scripts externes qui s'appuient sur le symbole pour figurer dans l'espace de noms global (par exemple, un JS hébergé en externe, des appels Javascript dans Selenium ou un simple accès au symbole dans la console du navigateur), vous souhaitez utiliser le expose-loader à la place.

En bref: ProvidePlugin gère les dépendances au moment de la construction en symboles globaux, alors que _expose-loader_ gère les dépendances à l'exécution en symboles globaux.

73
Joscha

On dirait que l'objet window est exposé dans tous les modules.

Pourquoi ne pas simplement importer/exiger JQuery et mettre:

window.$ = window.JQuery = JQuery;

Vous devrez vous assurer que cela se produit avant d'exiger/d'importer tout module utilisant window.JQuery, soit dans un module requis, soit dans le module où il est utilisé.

36
mhess

Cela a toujours fonctionné pour moi. y compris pour Webpackwindow.$ = window.jQuery = require("jquery");

15
SharpCoder

Dans mon cas ça marche

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }
2
FeDev

Mise à jour pour Webpack v2

Installez expose-loader comme décrit par Matt Derrick:

npm install expose-loader --save-dev

Ensuite, insérez l’extrait suivant dans votre webpack.config.js:

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        loaders: [
                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
        ]
    }
};

(à partir de docs expose-loader )

1
Cologne_Muc

Aucun de ce qui précède n'a fonctionné pour moi. Au lieu,

J'ai ajouté à webpack.config.js:

var webpack = require('webpack');
module.exports = {
   plugins: [
       new webpack.ProvidePlugin({
           $: 'jquery',
       })     
   ]
}

Tous les modules ont ensuite accès via jQuery via $.

Vous pouvez l'exposer à une fenêtre avec:

window.$ = window.jQuery = $
0
Antoine Vo