Exposer jQuery à un objet de fenêtre réel avec Webpack
Je ne veux pas exposer l'objet jQuery à l'objet global window qui est accessible à l'intérieur de 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 de mes modules webpack. Mais quand je construis le projet et que j'essaie d'accéder à jQuery dans developer console comme ceci:
window.$;
window.jQuery;
il est dit que ces propriétés ne sont pas définies...
Est-il un moyen de résoudre ce problème?
6 réponses
vous devez utiliser le exposure-loader .
npm install expose-loader --save-dev
vous pouvez soit 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 exposure-loader au lieu de exposure :
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
}
le ProvidePlugin remplace un symbole dans une autre source par l'importation respective, mais n'expose pas le symbole sur l'espace de noms global.
Les plugins jQuery en sont un exemple classique. La plupart d'entre eux s'attendent simplement à ce que jQuery soit défini globalement. Avec le ProvidePlugin vous vous assurerez que jQuery est une dépendance (par exemple chargé avant) et l'occurrence de jQuery dans leur code sera remplacé par l'équivalent brut webpack de require('jquery') .
si vous avoir des scripts externes en se basant sur le symbole pour être dans l'espace de nom global (comme un js hébergé de l'extérieur, les appels Javascript dans le sélénium ou tout simplement accéder au symbole dans la console du navigateur) vous voulez utiliser le expose-loader à la place.
en bref: ProvidePlugin gère les dépendances de build-time aux symboles globaux tandis que le expose-loader gère les dépendances d'exécution aux symboles globaux.
ressemble à l'objet window est exposé dans tous les modules.
pourquoi ne pas simplement importer/exiger JQuery et mettre:
window.$ = window.JQuery = JQuery;
dans votre module de point d'entrée?
ça a toujours marché pour moi. y compris pour webpack 3 window.$ = window.jQuery = require("jquery");
Dans mon cas, les œuvres
{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }
mise à jour pour Webpack v2
Installer exposez-loader tel que décrit par Matt Derrick:
npm install expose-loader --save-dev
insérer L'extrait suivant dans votre webpack.config.js :
module.exports = {
entry: {
// ...
},
output: {
// ...
},
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
]
}
};
(extrait du exposure-loader docs )