JavaScript and compilation of JavaScript files

Verze:

01. 08. 2022

Zodpovědná osoba:

Dominik Šlechta

JavaScript

On newer websites we use only pure Javascript without JQUERY and Boostrap !

The global javascript needed on most pages can be found in resources/js/app.js - functions initialization etc., if we want to use only in a specific template, we can use {block scripts} in this way (note, it can only be used if it is not a partial template - the partial template itself is already in the block content of the page ! Therefore we can put it in the parent template or in app.js - for global javascript)

{block content}
  Page content
{/block}


{block scripts}
    <script>
        JavaScript
    </script>
{/block}​​

If you need to add a plugin, most of them are already in the same folder as app.js and just need to be added to the webpack.mix.js file to build a javascript bundle - vendor.js, which is automatically loaded into the templates.

let mix = require('laravel-mix');

mix.options({
        processCssUrls: false,
});

// front
mix.sass('resources/sass/front/app.scss', 'assets/front/app.css')
   .combine([
        'resources/js/jquery.js',
        'resources/js/custom.js',
        'resources/js/bootstrap.js',
        'resources/js/incredible_select.js',
        'resources/js/netteForms.js',
        'resources/js/nette.ajax.js',
        'resources/js/fancybox.js'
   	], 'www/assets/front/vendor.js')
   .js('resources/js/app.js', 'assets/front/app.js')
   .js('resources/js/Vue/main.js', 'assets/front/eshop.js').vue();

// admin
mix.sass('resources/sass/admin/app.scss', 'assets/admin/app.css')
    .sass('resources/sass/front/mceeditor.scss', 'assets/admin/editor.css')
    .combine([
        'resources/js/jquery.js',
        'resources/js/popper.min.js',
        'resources/js/bootstrap.js',
        'resources/js/netteForms.js',
        'resources/js/nette.ajax.js',
        'resources/js/select2.js',
        'resources/js/incredible_select.js',
        'resources/js/selectize.js',
        'resources/js/jstree.js',
        'resources/js/moment.js',
        'resources/js/datetimepicker.js',
        'resources/js/jquery.tablesort.js',
        'resources/js/stickybits.js',
        'resources/js/Chart.js',
        'resources/js/datatables.js',
    ], 'www/assets/admin/vendor.js')
    .js('resources/js/admin_app.js', 'assets/admin/app.js')
    .js('resources/js/statistic_app.js', 'assets/admin/statistic.js');

// login
mix.sass('resources/sass/login/app.scss', 'assets/admin/login.css')


// basis setting
mix.setPublicPath('www')
    .version()
    .disableNotifications();