Assety Javascript

Jeśli z jakichś przyczyn nie masz dostępu do assetów JS w iCore, możesz opublikować odpowiednie pliki poleceniem:

php artisan vendor:publish --tag=icore.js

Assety JS dostępne są z poziomu folderu:

/resources/js/vendor/icore/


# Import bibliotek

Wszystkie biblioteki importowane są zbiorczo z poziomu plików:

  • resources/js/vendor/icore/admin/admin.js - dla panelu administracyjnego
  • resources/js/vendor/icore/web/web.js - dla strony
  • resources/js/vendor/icore/vendor/vendor.js - wspólne dla obu

# Skrypty

Wszystkie skrypty i eventy znajdują się w plikach na poziomie folderu:

  • resources/js/vendor/icore/admin/scripts - dla panelu administracyjnego
  • resources/js/vendor/icore/web/scripts - dla strony

# Webpack

Wszystkie assety JS są skompilowane na produkcji za pomocą Laravel Mix. W głównym folderze z aplikacją znajduje się plik konfiguracyjny:

  • webpack.mix.js

który można dostosować do własnych potrzeb (domyślnie umieszcza skompilowane pliki bezpośrednio do folderu public).

Kompilację należy przeprowadzać wyłącznie w trybie deweloperskim. Potrzebne jest do tego środowisko nodejs oraz pobranie dużej liczby zależności przez npm za pomocą polecenia:

npm install

Kompilację można uruchomić poleceniem:

npm run production


# Dodawanie własnych bibliotek do pliku Webpack

Nowe pliki nie ingerujące w assety iCore sugeruje się kompilować do osobnych plików. Proponowana konfiguracja:

  • dla panelu administracyjnego:
    mix.js('resources/js/admin/admin.js', 'js/custom/admin/admin.js');
  • dla strony użytkownika:
    mix.js('resources/js/web/web.js', 'js/custom/web/web.js');

Pliki publiczne pod tymi ścieżkami są już wstrzyknięte w nagłówek layout.blade.php:

<script src="{{ mix('js/vendor/icore/vendor/vendor.js') }}" defer></script>
<script src="{{ mix('js/vendor/icore/web/web.js') }}" defer></script>
<script src="{{ asset('js/custom/web/web.js') }}" defer></script>

Dzięki temu możliwe będzie aktualizowanie plików publicznych JS z iCore bezpośrednio przez publikację bez ryzyka, że nadpisze się swoje zmiany i bez konieczności ponownej kompilacji assetów.

# Dodawanie własnych skryptów do pliku Webpack

Nowe pliki nie ingerujące w assety iCore sugeruje się kompilować do osobnych plików. Proponowana konfiguracja:

  • dla panelu administracyjnego:
    .scripts([
        'resources/js/admin/scripts/**/*.js',
    ], 'public/js/custom/admin/scripts.js')
  • dla strony użytkownika:
    .scripts([
        'resources/js/web/scripts/**/*.js',
    ], 'public/js/custom/web/scripts.js')

Pliki publiczne pod tymi ścieżkami są już wstrzyknięte przed znacznikiem </body> w layout.blade.php.

@stack('script')
<
script src="{{ mix('js/vendor/icore/web/scripts.js') }}" defer></script> <script src="{{ asset('js/custom/web/scripts.js') }}" defer></script>

Dzięki temu możliwe będzie aktualizowanie plików publicznych JS z iCore bezpośrednio przez publikację bez ryzyka, że nadpisze się swoje zmiany i bez konieczności ponownej kompilacji assetów.

# Przekierowanie skryptów na własną logikę

Jeśli chcemy zmienić logikę skryptu należy wyłączyć bieżący skrypt za pomocą unikatowego namespace-a, a następnie zdefiniować własny skrypt. Przykład:

$(document).off('click.n1ebieski/icore/web/scripts/ajax/newsletter@store')
    .on('click.web/scripts/ajax/newsletter@store', '.store-newsletter', function () {
        // Your logic
    });