Symfony: глобальный импорт bootstrap

100
29 сентября 2021, 05:30

Мне необходимо подключить bootstrap 4 таким образом, чтобы он был виден во всех подключаемых javascript файлах. Собственно, есть файл app.js, в котором подключается bootstrap:

const $ = require('jquery');
global.$ = global.jQuery = $;
require('bootstrap');

Он прописан в webpack'e и вызывается в нужном мне html файле:

{{ encore_entry_link_tags('app') }}

Bootstrap заводится, все компоненты работают и даже плагины (по типу Modal, Tooltip и т.д.), но только ВНУТРИ app.js. Мне необходимо сделать так, чтобы эти плагины были видны для других JavaScript файлов.

Пробовал в нужном мне файле подключить нужные плагины отдельно:

require('bootstrap/js/dist/tooltip');
require('bootstrap/js/dist/modal');

Но таким образом весь функционал, связанный с этими компонентами, начинает срабатывать дважды, что выглядит неприятно и порой раздражает. Как можно подключить bootstrap так, чтобы функционал компонентов не дублировался и он был виден во всех JS файлах?

Вот ошибка на пример плагина Tooltip:

jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function
    at HTMLDocument.<anonymous> (https://192.168.117.39:8000/build/aboninfo.f622ec28.js:225:45)
    at mightThrow (https://192.168.117.39:8000/build/aboninfo.f622ec28.js:5833:29)
    at process (https://192.168.117.39:8000/build/aboninfo.f622ec28.js:5901:12) undefined

Событие модального окна (плагин Modal) так вообще не срабатывает и никакой реакции на него нет:

$("#inetSessionListModal").on('show.bs.modal', function(e) {
...
});

Подключение файлов в Webpack:

.addEntry('app', './assets/js/app.js')
.addEntry('aboninfo', './assets/js/aboninfo.js')

И в самом шаблоне:

{% block javascripts %}
    {{ parent() }} // Здесь подключается app.js
    {{ encore_entry_script_tags('aboninfo') }}
{% endblock %}
Answer 1

Решил свою проблему следующим образом, прописав в нужном файле следующее:

const $ = global.jQuery;

И после этого все ивенты, которые были прикреплены к jQuery, подхватились в нужном мне файле.

READ ALSO
Код не возвращает данные из JSON файла

Код не возвращает данные из JSON файла

Проходя курс по JS столкнулся с проблемой во время использования Promise вместо обычных callback функций

84
event.target.value - взять одно значение из двух

event.target.value - взять одно значение из двух

Возникла необходимость добавить выпадающий список с двумя значениями - условно контактом и его ID, одной строкойВыбранное значение обрабатывается...

99
Проблема с памятью

Проблема с памятью

Практика «Частотность N-грамм»

112
Корректно оформить строку

Корректно оформить строку

Получаю из базы данных строку valuesОна представляет собой числа через запятую

130