0

Мне необходимо подключить 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 %}
7
  • Приведите пример того, что не работает и как эти (дополнительные) скрипты подключаются 23 окт 2019 в 12:31
  • Дополнил вопрос
    – WGPavell
    23 окт 2019 в 12:45
  • попробуйте вместо global.$ = global.jQuery = $; сделать window.$ = window.jQuery = $; 23 окт 2019 в 13:10
  • Все так же, ничего не изменилось
    – WGPavell
    23 окт 2019 в 13:13
  • а block javascripts в начале html или в конце? 23 окт 2019 в 13:15

1 ответ 1

0

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

const $ = global.jQuery;

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.