Невозможно использовать старую добрую JS-функцию с некоторым jQuery в шаблоне лезвия Laravel 5.7 с веб-пакетом - метод не найден
Я использую Laravel 5 Boilerplate, который поставляется с уже готовой структурой.
Я хочу вызвать простой метод JavaScript из лезвия. Вот что я сделал:
1) Создан файл под названием test123.js
содержание test123.js:
function test123() {
$(document).ready(function () {
console.info('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 запросил еще несколько снимков экрана:
Привет @brk, я загрузил скриншот в самом низу вопроса. Чего я хочу добиться, так это переместить весь этот материал jQuery в test123 и повторно использовать его в других шаблонах. Это то, чего я действительно хочу достичь. Пока я не могу вызвать метод.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуйте явно экспортировать функцию:
export function test123() {...}
а затем импортируйте его:
import 'test123' from './test123';
Вы можете попробовать сделать это с помощью 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.
Можете ли вы показать дом из инструмента разработчика