Separate js files

• 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

[harshpatel147]

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

hi I wants to compile DataTable as a separate file. So I created files as like below…

resource/js/datatables/datatable.js

// DataTables & Plugins
window.$.fn.DataTable = require('datatables.net/js/jquery.dataTables');
// require('datatables.net-bs4')( window, $ );
window.$.fn.DataTable = require('datatables.net-bs4/js/dataTables.bootstrap4');
window.$.fn.DataTable.responsive = require('datatables.net-responsive/js/dataTables.responsive');
window.$.fn.DataTable.responsive = require('datatables.net-responsive-bs4/js/responsive.bootstrap4');
window.$.fn.DataTable.buttons = require('datatables.net-buttons/js/dataTables.buttons');
window.$.fn.DataTable.buttons = require('datatables.net-buttons-bs4/js/buttons.bootstrap4');

resource/js/datatables/datatablePlugins.js

// DataTables Plugins
window.JSZip = require('jszip/dist/jszip');
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
require('datatables.net-buttons/js/buttons.html5');
require('datatables.net-buttons/js/buttons.print');
require('datatables.net-buttons/js/buttons.colVis');

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    // .js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

mix.js('resources/js/datatables/datatable.js', 'public/js')
    .js('resources/js/datatables/datatablePlugins.js', 'public/js')
    .sass('resources/sass/datatables/datatable.scss', 'public/css');

& my View File

<html>
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="{{ asset('css/datatable.css') }}">
</head>
<body>
  // html code
</body>
<script src="{{ asset('js/datatable.js') }}"></script>
<script src="{{ asset('js/datatablePlugins.js') }}"></script>
<script>
$(function () {
   $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
   }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
 });
</script>
</html> 

But when I run it in Browser then browser console show me this error Uncaught Unknown button type: print

Please Help me…