3
votes

Contrôle des dépendances dans Webpack

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

Dans polyfill-init.js je fais ceci: jQuery (document) .ready (... . Cela aboutit à ceci erreur:

Uncaught ReferenceError: jQuery n'est pas défini

J'obtiens également cette erreur si j'essaie de le mélanger avec 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 séparés, de sorte qu'aucun conflit ne se produit. Et c'est très bien, mais je ne sais pas comment combiner deux scripts requis / importés, donc ils utilisent le même espace de noms / environnement.

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

J'ai regardé la documentation de Webpack pour voir s'il existe un moyen de définir une dépendance pour un script importé / requis, mais soit ce n'est pas là; ou je ne comprends pas.

J'ai également examiné les 7 milliards de façons dont ce message suggère que je le ferais , - mais j'essaie de comprendre comment Webpack / Laravel-mix veut que je le fasse.

Ma question est donc ... Y a-t-il un moyen pour que je puisse faire quelque chose comme ceci:

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

... et laisser Webpack savez-vous que polyfill-init peut utiliser jQuery ?

javascript webpack

0 commentaires

3 Réponses :

2
votes

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

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

0 commentaires

4
votes

Vous pouvez utiliser provideplugin:

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

1 commentaires

C'est dans le fichier webpack-config, - où je voudrais tout contrôler dans le fichier webpack.mix.js , afin que je puisse avoir les paramètres par défaut, dans la mesure du possible.

0
votes

Vous devez externaliser JQuery du pack Web.

index.html

import $ from 'jquery';

webpack.config.js

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

polyfill-init.js

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

Pour plus de détails, consultez https: //webpack.js. org / configuration / externals /

0 commentaires