Laravel-mix: laravel mix . export

[wojlive]

Hi I am using laravel mix with my Laravel 5.5

I have my mix file like this:

/* 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');

What I wanted to do is use the extract method as mentioned in documentation:

Vendor Extraction One potential downside to bundling all application-specific JavaScript with your vendor libraries is that it
makes long-term caching more difficult. For example, a single update
to your application code will force the browser to re-download all of
your vendor libraries even if they haven't changed.

If you intend to make frequent updates to your application's
JavaScript, you should consider extracting all of your vendor
libraries into their own file. This way, a change to your application
code will not affect the caching of your large vendor.js file. Mix's
extract method makes this a breeze:

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

The extract method accepts an array of all libraries or modules that
you wish to extract into a vendor.js file. Using the above snippet as
an example, Mix will generate the following files:

public/js/manifest.js: The Webpack manifest runtime
public/js/vendor.js: Your vendor libraries public/js/app.js: Your
application code To avoid JavaScript errors, be sure to load these
files in the proper order:

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

So I have created an empty file in: resources/aseets/js/app.js and in my webpack:

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

Everything is being processed successfully, I attached all the files. app.js seems to have required content however when I get to the page apparently jquery is not being defined.

What could be the cause? I have installed bootstrap,jquery and pace throught npm

[brandon14]

At first glance you probably need make jQuery global in webpack. To do that with laravel-mix you can do something like:

mix.autoload({
  jquery: ['$', 'jQuery', 'jquery'],
})

This is actually what I do in my Laravel application that uses jQuery.