Exposez jQuery à un objet Window réel avec Webpack

Je souhaite exposer l'objet jQuery à l'objet de fenêtre global qui est accessible dans la console 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 mes modules webpack. Mais lorsque je construis le projet et que j'essaye d'accéder à jQuery dans la console du développeur comme ceci:

window.$;
window.jQuery;

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

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

Vous devez utiliser le chargeur d'exposition .

npm install expose-loader --save-dev

Vous pouvez soit le faire lorsque vous en avez besoin:

require("expose?$!jquery");

ou vous pouvez le faire dans votre configuration:

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

MISE À JOUR : À partir du webpack 2, vous devez utiliser exposer-loader au lieu d' exposer :

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

FournirPlugin remplace un symbole dans une autre source via l'importation respective, mais n'expose pas le symbole sur l'espace de noms global. Un exemple classique sont les plugins jQuery. La plupart d'entre eux s'attendent simplement jQueryà être définis globalement. Avec le, ProvidePluginvous vous assurez que jQuery est une dépendance (par exemple chargée avant) et que l'occurrence de jQuerydans leur code serait remplacée par l'équivalent brut de webpack require('jquery').

Si vous avez des scripts externes reposant sur le symbole pour être dans l'espace de noms global (comme disons un JS hébergé en externe, des appels Javascript dans Selenium ou simplement en accédant au symbole dans la console du navigateur), vous souhaitez utiliser à la expose-loaderplace.

En bref: FournirPlugin gère les dépendances au moment de la construction pour les symboles globaux tandis que le expose-loadergère les dépendances d'exécution avec les symboles globaux.

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

Pourquoi ne pas simplement importer / exiger JQueryet mettre:

window.$ = window.JQuery = JQuery;

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

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

Aucun de ces éléments n'a fonctionné pour moi. (et je n'aime vraiment pas la syntaxe exposer-loader). Au lieu,

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

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

Que tous les modules ont accès via jQuery via $.

Vous pouvez l'exposer à la fenêtre en ajoutant ce qui suit à l'un de vos modules fournis par webpack:

window.$ = window.jQuery = $

Mise à jour pour Webpack v2

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

npm install expose-loader --save-dev

Insérez ensuite l'extrait de code suivant dans votre webpack.config.js:

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

(à partir de la documentation expose-loader )

Dans mon cas fonctionne

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