Невозможно использовать старую добрую JS-функцию с некоторыми jQuery в шаблоне блейда Laravel 5.7 с веб-пакетом - метод не найден

Question

Я использую Laravel 5 Boilerplate, который поставляется с некоторой уже готовой структурой.

Я хочу вызвать простой метод JavaScript из блейда.Вот что я сделал:

1) Создан файл с именем test123.js

содержимое test123.js:

function test123() {
    $(document).ready(function () {
        console.log('hello from test123');
    });
}

2) Я открыл существующий app.js идобавлено:

import './test123';

3) Я позвонил npm dev run - все зеленые, все в порядке.

4) В клинке index.blade.php Я набрал:

@push('after-scripts')
    <script>
        test123();
    </script>
@endpush

Я пошел в скомпилированный файл:

<script src="http://foo.local/js/backend.js?id=8dbe74e012c3122422da"></script>

Мой метод там:

однако это не таквидимый.

Я предполагаю, что это о сферах?Я не хочу делать это window.test123.Нужно ли мне?Я просто хочу определить старый добрый метод JS / jQuery и вызывать его только при необходимости в определенных шаблонах.

«Современный» JS не является моей сильной стороной, поскольку я нахожу его очень запутанным.Я не коснулся значения по умолчанию webpack.mix.js.

mix.setPublicPath('public');

mix.sass('resources/sass/frontend/app.scss', 'css/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend.js')
    .extract([
        'jquery',
        'bootstrap',
        'popper.js/dist/umd/popper',
        'axios',
        'sweetalert2',
        'lodash',
        '@fortawesome/fontawesome-svg-core',
        '@fortawesome/free-brands-svg-icons',
        '@fortawesome/free-regular-svg-icons',
        '@fortawesome/free-solid-svg-icons'
    ]);

Пожалуйста, помогите мне достичь этой простой вещи.Я знаю, что решение, вероятно, не сложное, но я не знаю, что делать ...

Спасибо.

Редактировать 1: Я почти забыл.Вот структура Boilerplate :

Редактировать 2: Пользователь brk запросил еще несколько скриншотов:

Answer 1

Вы можете попробовать сделать это с помощью require.js

 //declare fn test123
 test123(){ ...do something}
 module.exports.test123 = test123;

, а затем

 let test123 = require('./test123');

Здесь вы можете найти больше информации об использовании require.js в браузере с jquery https://requirejs.org/docs/jquery.html

Answer 2

Попробуйте экспортировать функцию явно:

export function test123() {...}

, а затем импортируйте ее:

import 'test123' from './test123';