Как собрать Bootstrap 4 с помощью jQuery slim и нового @popperjs с помощью Laravel-mix?

Question

Содержание webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/assets/js/vendor.js', 'public/js');

Содержание vendor.js:

window.Popper = require('@popperjs/core').default;

try {
    window.$ = window.jQuery = require('jquery/dist/jquery.slim.js');

    require('bootstrap');
} catch (e) {}

После сборки в public/js/vendor.js файл, я ясно вижу, что @popperjs а также jquery.slim.js включается поверх jquery и старый popperjs (они дублируются).

Я знаю, что это происходит потому, что node_modules\bootstrap\dist\js\bootstrap.js имеет require('jquery'), require('popper.js') как зависимости.

Как я могу создать активы с новыми @popperjs а также jquery.slim.js без старого popperjs и полный jquery версия?

Answer 1

Это может вам помочь: https://getbootstrap.com/docs/4.0/getting-started/webpack/

Таким образом, вы можете импортировать плагины по отдельности и использовать более новую версию popperjs. Но рассчитывайте, что для bootstrap 4 может быть нестабильно использовать более новую версию popperjs.

Кстати: https://github.com/twbs/bootstrap/issues/29842 шанс в bootstrap 5.

Answer 2

Bootstrap 4 несовместим с Popper 2 (npm@popperjs/core), вам нужно использовать Popper 1 ([e-mail])

Answer 3

Ссылка:

Я знаю, что это происходит потому, что node_modules\bootstrap\dist\js\bootstrap.js имеет require('jquery'), require('popper.js') как зависимости.

Неправильно.
Bootstrap не загружает за вас ни jQuery, ни popper. Вы должны загрузить их самостоятельно, независимо от того, какой менеджер пакетов вы используете.

Источник: https://getbootstrap.com/docs/4.0/getting-started/download/

require('bootstrap') загрузит все плагины jQuery Bootstrap в объект jQuery.

Все, что вы получаете, это предупреждение в консоли при установке npm Пакет Bootstrap, если он не найдет подходящего jquery версия пакета в ваших зависимостях.

Это также довольно легко проверить: просто не включайте jQuery до того, как потребуется Bootstrap, откройте консоль, получите пакет попкорна, нажмите кнопку обновления и наслаждайтесь шоу.

---

Сказать webpack jquery можно найти на window.jQuery (всякий раз, когда он может потребоваться или импортирован в ваше приложение), вы должны указать его в конфигурации webpack externals:

externals: {
  jquery: 'window.jQuery'
}

При этом в любом месте вашего приложения, где вы используете import * as $ from 'jquery' он фактически будет использовать все, что window.jQuery находится в момент выполнения запроса / импорта.

---

Насколько авторитетные источники отвечают на вопрос "Каковы зависимости Bootstrap?" вопрос, единственный источник - Начало работы.

А вот где в явном виде указывается, что jQuery не включен: #js-files