Getting started with Laravel-Mix. Basics and complexity

Hi

I've been trying to get to grips with Laravel Mix to bring an older app up to date and refactor the front end.

I've had mixed success but each time I get my head round it I take one step forward and one step back. So I'm misunderstanding a number of concepts here I'd like some help with.

My app uses jQuery, bootstrap 3 and a range of js plugins. Some pages need scripts to handle set up such as datatable, form wizards and scripts to handle form controls etc

Up until now I've included the relevant js files in using script tags, concatenated the "plugins".

So here are some problems I've encountered:

1. **loading Jquery for global access: **

I've tried numerous approaches to get this to work, datatables for example complained $ was not a defined. So after much searching I have this in my webpack.mix.js file:

const mix = require('laravel-mix');
const webpack = require('webpack');

mix.webpackConfig({
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery',
        }),
    ]
});

I assumed this would include jQuery and make it available globally - it didn't so I then added this to my test script:

mix.autoload({
    jquery: ['$', 'window.jQuery']
}).js('resources/js/src/test/test.js', 'public/js-test')
    .extract(['jquery', 'bootstrap', 'bootbox',]);

I thought this again would make it available, but that failed too so finally added this to my test.js file.

/*
* import core plugins
 */

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

// window.$ = window.jQuery = jQuery;
global.$ = global.jQuery = require('jquery');

Success, this now works for datatables - i've left the other attempts in above as comments so you can see what I've tried.

So - having got this to work for jQuery what is the correct way to do this, why are there so many different ways and why, for something so common, is this so difficult? Are any of the methods duplicating each other?

##2. Plugins.##

Next step to gradually add back the plugins the pages use. With my test script I started to build these up one plugin at a time and deal with the fails. If I keep doing this my compiled script will be a monster size ( a few lines of my code to test have already bloated it to 1.6mb and that's after extracting some files to vendor.

What is the best way to add plugins to the script? Here's what I've tested so far:

//import bootstrap and utilities
import '../core/bootstrap.js';

var moment = require('moment');
var bootbox = require('bootbox');
require('bootstrap-colorpicker');
require('../core/common-plugins.js');

With the moment and bootbox plugin I needed to assign as variables to get them to work. To avoid file bloat I thought I could add these to common-plugin.js which looks like this:

require('block-ui');
require('autosize');
require('bootstrap-confirmation2');
require('bootstrap-daterangepicker');
require('bootstrap-wizard');
require('jquery-colorbox');
require('jquery-slimscroll');
require('jquery-validation');
require('jquery.cookie');
require('magicsuggest');
require('messenger-hubspot');
require('moment');
require('pickadate');
require('select2');
require('timeago');

Some of these work, some don't. I had to move bootbox back to the test.js file to get that to work and gradually doing the same with the rest. So - should I simply revert back to concatenating the plug in scripts as I did before and forget about adding these as requirements. As you can see I'm not sure of the different concepts here so any explanation or best practice would be great :) I'm confused about this!!

I've looked at loads of different approaches but have yet to find one that works or covers this - I thought this would be a common problem?

I'm beginning to regret starting this, but determined to get an approach so I can keep on learning. I've posted similar questions in the past but zero response, so hope someone can point me in the right direction.