Gestion de la dépendance du plugin jQuery dans webpack

pour l'accès global à jquery alors plusieurs options existent. Dans mon dernier projet webpack, je voulais un accès global à jquery et j'ai donc ajouté ce qui suit à mes déclarations de plugins:

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

cela signifie donc que jquery est accessible depuis le code source JavaScript via les références globales $ et jQuery.

bien sûr, vous devez aussi avoir installé jquery via npm:

$ npm i jquery --save

pour une exemple de cette approche s'il vous plaît n'hésitez pas à bifurquer mon application sur github

Je ne sais pas si je comprends très bien ce que vous essayez de faire, mais j'ai dû utiliser des plugins jQuery qui nécessitaient que jQuery soit dans le contexte global (fenêtre) et j'ai mis ce qui suit dans mon entry.js :

var $ = require('jquery');
window.jQuery = $;
window.$ = $;

j'ai juste besoin là où je veux jqueryplugin.min.js et window.$ est étendu avec le plugin comme prévu.

ajoutez ceci à votre tableau de plugins dans webpack.config.js

new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
})

alors exiger jQuery normalement

require('jquery');

si la douleur persiste obtenir d'Autres scripts pour le voir, essayer de le placer explicitement dans le contexte global via (dans l'entrée js)

window.$ = jQuery;

j'ai obtenu que les choses fonctionnent bien tout en exposant $ et jQuery comme variables globales avec Webpack 3.8.1 et ce qui suit.

installer jQuery comme une dépendance de projet. Vous pouvez omettre @3.2.1 pour installer la dernière version ou spécifier une autre version.

npm install --save jquery@3.2.1

installer expose-loader comme une dépendance de développement si elle n'est pas déjà installée.

npm install expose-loader --save-dev

configurer Webpack pour charger et exposer jQuery pour nous.

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

cela fonctionne dans webpack 3:

dans le webpack.config.Babel.fichier js:

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

et utiliser ProvidePlugin

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

j'ai essayé certaines des réponses fournies mais aucune ne semblait fonctionner. Puis j'ai essayé ceci:

new webpack.ProvidePlugin({
    'window.jQuery'    : 'jquery',
    'window.$'         : 'jquery',
    'jQuery'           : 'jquery',
    '$'                : 'jquery'
});

Semble fonctionner quelle que soit la version que j'utilise

la meilleure solution que j'ai trouvée était:

https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059

en gros, vous devez inclure une variable fictive sur les typographies.D. ts, supprimez tout "importer * comme $ de 'jquery" de votre code, puis ajoutez manuellement une balise à jQuery script à votre html SPA. De cette façon, webpack ne sera pas sur votre chemin, et vous devriez être en mesure d'accéder à la même variable jQuery globale dans tous les vos scripts.

Cela fonctionne pour moi sur le webpack.config.js

    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),

dans un autre javascript ou dans HTML ajouter:

global.jQuery = require('jquery');

modifier: parfois, vous voulez utiliser webpack simplement comme un module bundler pour un projet web simple - pour garder votre propre code organisé. La solution suivante est pour ceux qui veulent juste qu'une bibliothèque externe fonctionne comme prévu à l'intérieur de leurs modules - sans passer beaucoup de temps à plonger dans les configurations webpack. (Révisé après -1)

solution rapide et simple (es6) si vous êtes encore en difficulté ou si vous voulez éviter les externes config / plugin webpack config:

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

dans un module:

const { jQuery: $, Underscore: _, etc } = window;

dans votre webpack.config.Ajouter ci-dessous:

 var webpack = require("webpack");
 plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

installer jQuery en utilisant npm:

$ npm i jquery --save

Dans l'app.ajouter les lignes suivantes:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

ça a marché pour moi. :)