Laravel mix méthode .extract

Question

Salut J'utilise Laravel mélanger avec mon Laravel 5.5

J'ai mon fichier de mixage comme ceci:

/* Production settings */ 
if (mix.inProduction()) { 
    mix.version(); 
    mix.disableNotifications(); 
} 
/* Sass Processing */ 
mix.sass('resources/assets/sass/_bootstrap.scss', 'public/css/bootstrap.css'); 
mix.sass('resources/assets/sass/navigation.scss', 'public/css/navigation.css'); 
mix.sass('resources/assets/sass/global.scss', 'public/css/global.css').options({ 
    processCssUrls: false 
}); 
mix.sass('resources/assets/sass/cards.scss', 'public/css/cards.css') 
    .sass('resources/assets/sass/forms.scss', 'public/css/forms.css') 
    .sass('resources/assets/sass/search.scss', 'public/css/search.css') 
    .sass('resources/assets/sass/profile.scss', 'public/css/profile.css') 
    .sass('resources/assets/sass/event.scss', 'public/css/event.css') 
    .sass('resources/assets/sass/entity.scss', 'public/css/entity.css') 
    .sass('resources/assets/sass/travel.scss', 'public/css/travel.css') 
    .sass('resources/assets/sass/sliders.scss', 'public/css/sliders.css') 
    .sass('resources/assets/sass/login.scss', 'public/css/login.css'); 

mix.styles([ 
    'resources/assets/css/bootstrap-social.css', 
    'resources/assets/css/dropzone.css', 
    'resources/assets/css/jquery-ui.css', 
    'resources/assets/css/jquery-ui.structure.css', 
    'resources/assets/css/jquery-ui.theme.css', 
    'resources/assets/css/font-awesome.css', 
    'resources/assets/css/animate.css', 
], 'public/css/style.css'); 

/* Global JS */ 
mix.scripts([ 
    'resources/assets/js/pace.js', 
    'resources/assets/js/jquery.js', 
    'resources/assets/js/page-load.js', 
    'resources/assets/js/bootstrap.js', 
    'resources/assets/js/jquery-ui.js', 
    'resources/assets/js/favourites.js', 
], 'public/js/global.js'); 

mix.js('resources/assets/js/dropzone.js', 'public/js/dropzone.js'); 

mix.js('resources/assets/js/image-upload.js', 'public/js/image-upload.js'); 

mix.js('resources/assets/js/googlemap.js', 'public/js/googlemap.js'); 

mix.js('resources/assets/js/entity.js', 'public/js/entity.js'); 

mix.js('resources/assets/js/validation.js', 'public/js/validation.js'); 

mix.js('resources/assets/js/search.js'); 

mix.js('resources/assets/js/homesearch.js', 'public/js/homesearch.js'); 

mix.js('resources/assets/js/instantsearch.js', 'public/js/instantsearch.js'); 

mix.js('resources/assets/js/featured.js', 'public/js/featured.js'); 

mix.js('resources/assets/js/tram.js', 'public/js/tram.js'); 

mix.js('resources/assets/js/counter.js', 'public/js/counter.js'); 

Ce que je voulais faire est d'utiliser la méthode d'extrait comme mentionné dans documentation:

Extraction du vendeur Un potentiel de baisse à la vente liée tout JavaScript spécifique à l'application avec vos bibliothèques de fournisseurs est qu'il rend la mise en cache à long terme plus difficile. Par exemple, une seule mise à jour à votre code d'application forcera le navigateur à télécharger à nouveau toutes les bibliothèques de votre fournisseur même si elles n'ont pas été modifiées.

Si vous avez l'intention de faire des mises à jour fréquentes JavaScript de votre application, vous devriez envisager d'extraire l'ensemble de votre fournisseur bibliothèques dans leur propre fichier. De cette façon, une modification du code de votre application n'affectera pas la mise en cache de votre fichier important vendor.js. méthode d'extraction de Mix fait un jeu d'enfant:

mix.js('resources/assets/js/app.js', 'public/js') .extract(['vue']) 

La méthode d'extraction accepte un tableau de toutes les bibliothèques ou modules que vous souhaitez extraire dans un fichier vendor.js. En utilisant l'extrait ci-dessus comme un exemple , Mix génère les fichiers suivants:

/public/js manifest.js: Le temps d'exécution manifeste Webpack public/js/vendor.js: Vos bibliothèques de fournisseurs publics/js/app. js: Votre code d'application pour éviter des erreurs JavaScript, assurez-vous de charger ces fichiers dans l'ordre approprié:

<script src="/js/manifest.js"></script> 
<scrip src="/js/vendor.js"></script> 
<script src="/js/app.js"></script> 

J'ai donc créé un fichier vide: ressources/aseets/js/app.js et dans mon webpack:

mix.js('resources/assets/js/app.js', 'public/js') 
    .extract(['jquery', 'bootstrap', 'pace']) 

Tout est en cours de traitement avec succès, j'ai joint tous les fichiers. app.js semble avoir contenu requis cependant quand j'arrive à la page apparemment jquery n'est pas défini.

Quelle pourrait être la cause? J'ai installé bootstrap, jquery et le rythme throught NPM

Answer 1

Avec vue, les plugins jquery ont certains conflits

https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/