Laravel-mix: Separate js files

[frdteknikelektro]

• Laravel Mix Version: 1.4.2 (npm list --depth=0)
• Node Version (node -v): v7.10.1
• NPM Version (npm -v): 5.3.0
• OS: Ubuntu 16.04

Description:

I don't really understand how webpack works. I fail to make this work, please help.

webpack.mix.js

...
mix.js('resources/assets/js/admin-lte.js', 'public/js')
   .sass('resources/assets/sass/admin-lte.scss', 'public/css');

mix.js('resources/assets/js/datatables.net.js', 'public/js')
   .sass('resources/assets/sass/datatables.net.scss', 'public/css');

mix.js('resources/assets/js/metrics/index.js', 'public/js/metrics')
   .sass('resources/assets/sass/metrics/index.scss', 'public/css/metrics');
...

resources/assets/js/admin-lte.js

require('./bootstrap');
require('fastclick');
require('admin-lte');
require('sparkline');
require('jvectormap');
require('jvectormap/tests/assets/jquery-jvectormap-world-mill-en')
require('slim-scroll');
require('chart.js');

resources/assets/js/datatables.net.js

require('datatables.net')();
require('datatables.net-bs')();

resources/assets/js/metrics/index.js

$(function() {
  $('#metrics').DataTable();
});

view file

<script src="{{ mix('/js/admin-lte.js') }}" charset="utf-8"></script>
<script src="{{ mix('/js/datatables.net.js') }}" charset="utf-8"></script>
<script src="{{ mix('/js/metrics/index.js') }}" charset="utf-8"></script>

Not all page using datatable, so the goal is to seprate datatable, but i don't understand why it's failed

console log error:

Uncaught TypeError: Cannot set property '$' of undefined
    at DataTable (datatables.net.js?id=3df6b5027d25fee26b58:393)
    at Object../resources/assets/js/datatables.net.js (datatables.net.js?id=3df6b5027d25fee26b58:25875)
    at __webpack_require__ (datatables.net.js?id=3df6b5027d25fee26b58:20)
    at Object.1 (datatables.net.js?id=3df6b5027d25fee26b58:25883)
    at __webpack_require__ (datatables.net.js?id=3df6b5027d25fee26b58:20)
    at datatables.net.js?id=3df6b5027d25fee26b58:63
    at datatables.net.js?id=3df6b5027d25fee26b58:66

[frdteknikelektro]

Okay, seems like i just find the solution. It's tricky when it comes to jQuery plugin (because it's not instance new object, but modifying jquery object).

Here is my workaround

resources/assets/js/datatables.net.js

window.$.fn.DataTable = require('datatables.net');
window.$.fn.DataTable = require('datatables.net-bs');

Hope this will help someone. Thanks

[legreco]

Thanks. Do you find a way to proper require all datatables plugins (without console error)?

[frdteknikelektro]

I find it more simple if you didn't separate js file or require a file that calling jQuery

// in app.js

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

require('datatables.net');
require('datatables.net-bs');
//If you use plugin you could add
require('datatables.net-responsive');
require('datatables.net-responsive-bs');

[legreco]

I tried this before it didnt work. This works for me:

window.$ = window.jQuery = require('jquery');
    require('datatables.net');
   require( 'imports-loader?define=>false!datatables.net-buttons' )(window, $);
    require( 'imports-loader?define=>false!datatables.net-buttons/js/buttons.html5.js' )(window, $);
   require( 'imports-loader?define=>false!datatables.net-buttons/js/buttons.print.js' )(window, $);
    require( 'imports-loader?define=>false!datatables.net-select' )(window, $);

As you can see i have to disable AMD to get it worked. In my webpack.mix:

mix.combine(
        [
            'node_modules/datatables.net-dt/css/jquery.dataTables.css',
            'node_modules/datatables.net-autofill-dt/css/autoFill.dataTables.css',
            'node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css',
            'node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css',
            'node_modules/datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css',
            'node_modules/datatables.net-fixedheader-dt/css/fixedHeader.dataTables.css',
            'node_modules/datatables.net-keytable-dt/css/keyTable.dataTables.css',
            'node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css',
            'node_modules/datatables.net-rowgroup-dt/css/rowGroup.dataTables.css',
            'node_modules/datatables.net-rowreorder-dt/css/rowReorder.dataTables.css',
            'node_modules/datatables.net-scroller-dt/css/scroller.dataTables.css',
            'node_modules/datatables.net-select-dt/css/select.dataTables.css',
        ]
        ,'public/css/app.css');

[frdteknikelektro]

If it work with you then no problem.

[kwhat]

Still having major issues with this, I am not sure what the point of using webpack is if I am going to put jquery everything into the same 5mb file. One day one of these JS tools will actually save me some time.