Как собрать Bootstrap 4 с jQuery slim и new @ popper js с Laravel -mix? - PullRequest
Новая
       94

Как собрать Bootstrap 4 с jQuery slim и new @ popper js с Laravel -mix?

0 голосов
/ 07 мая 2020

Содержимое 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 версии?

Ответы [ 3 ]

1 голос
/ 19 мая 2020

Bootstrap 4 несовместимо с Popper 2 (npm@popperjs/core), вам нужно использовать Popper 1 (npm@popper.js)

1 голос
/ 21 мая 2020

Ссылка:

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

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

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

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

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

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

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

externals: {
  jquery: 'window.jQuery'
}

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

Что касается авторитетных источников go для ответа «Какие есть зависимости Bootstrap?» вопрос, единственный источник: Начало работы .

А вот где ясно указывается jQuery не включается: # js -файлы

1 голос
/ 16 мая 2020

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

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

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

...