Contrôle des dépendances dans Webpack

Question

J'utilise Laravel-mix et Webpack pour combiner et contrôler les scripts d'un site.

Je suis mon principal app.js J'ai ces lignes :

var jQuery = require( 'jquery' );
require( './vendor/polyfill-library.min.js' );
require( './vendor/polyfill-init.js' ); // which is using jQuery

Sur polyfill-init.js C'est ce que je fais : jQuery( document ).ready( ... . Cela donne lieu à cette erreur :

Uncaught ReferenceError : jQuery n'est pas défini

J'obtiens également cette erreur si j'essaie de les mélanger en utilisant Laravel-mix, en ajoutant ceci à mon webpack.mix.js :

mix.js( [
    'resources/js/app.js',
    'resources/js/vendor/polyfill-library.min.js',
    'resources/js/vendor/polyfill-init.js',
  ], 'assets/js/app.js')

Je suppose que l'erreur est due au fait que Webpack conserve les scripts requis/importés dans des espaces de noms/environnements distincts, de sorte qu'aucun conflit ne se produit. Et tout cela est très bien, - mais je ne sais pas comment combiner deux scripts requis/importés, afin qu'ils utilisent le même espace de noms/environnement.

... Si je copie tout le code dans app.js (au lieu de l'exiger), alors cela fonctionne, mais ce n'est pas joli. Pas joli du tout.

J'ai regardé La documentation de Webpack pour voir s'il y a un moyen de définir une dépendance pour un script importé ou requis, mais soit il n'y en a pas ; soit je ne l'obtiens pas.

J'ai aussi regardé le 7 milliards de façons dont ce post suggère que je le ferais. mais j'essaie de comprendre comment Webpack/Laravel-mix veulent que je le fasse.

---

Donc ma question est... Y a-t-il un moyen pour que je puisse faire quelque chose comme ça :

var jQuery = require( 'jquery' );
require( './vendor/polyfill-library.min.js' );
require( './vendor/polyfill-init.js' ); // which is using jQuery

... et laisser Webpack savoir, que polyfill-init peut utiliser jQuery ?

Answer 1

Vous pouvez utiliser provideplugin :

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

Answer 2

Essayez window.jQuery = require( 'jquery' ) ;

polyfill-init.js recherche probablement jQuery dans la portée globale alors que la var jQuery n'est disponible que dans la portée locale de ce module.

Answer 3

Vous devez externaliser JQuery du webpack.

index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

polyfill-init.js

import $ from 'jquery';

Plus de détails ici https://webpack.js.org/configuration/externals/