El contenido de webpack.mix.js:

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

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

El contenido de vendor.js:

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

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

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

Después de la compilación, en el archivo public/js/vendor.js puedo ver claramente que @popperjs y jquery.slim.js se incluyen encima de jquery y popperjs anteriores (se duplican) .

Sé que esto sucede porque node_modules\bootstrap\dist\js\bootstrap.js tiene require('jquery'), require('popper.js') como dependencias.

¿Cómo puedo construir los activos con las nuevas @popperjs y jquery.slim.js sin la versión anterior popperjs y completa jquery?

0
Binar Web 7 may. 2020 a las 21:28

3 respuestas

La mejor respuesta

Podría ayudarlo: https://getbootstrap.com/docs /4.0/getting-started/webpack/#importing-javascript

Por lo tanto, puede importar complementos individualmente y usar una nueva versión de popperjs. Pero cuente con que podría ser inestable que Bootstrap 4 use una nueva versión de popperjs.

Por cierto: https://github.com/twbs/bootstrap/issues/29842 chance en bootstrap 5.

1
bornemisza 16 may. 2020 a las 14:51

Ref:

Sé que esto sucede porque node_modules\bootstrap\dist\js\bootstrap.js tiene require('jquery'), require('popper.js') como dependencias.

Incorrecto.
Bootstrap no carga ni jQuery ni popper por usted. Debe cargarlos usted mismo, independientemente del administrador de paquetes que utilice.

Fuente: https://getbootstrap.com/docs/4.0/getting -started / download / # package-managers

require('bootstrap') cargará todos los complementos jQuery de Bootstrap en el objeto jQuery.

Todo lo que obtienes es una advertencia en la consola al instalar el paquete de Bootstrap npm si no encuentra una versión de paquete jquery adecuada en tus dependencias.

Esto también es bastante fácil de probar: simplemente no incluya jQuery antes de requerir Bootstrap, abra la consola, obtenga una bolsa de palomitas de maíz, presione el botón de actualización y disfrute del espectáculo.


Para indicar que el paquete web jquery se encuentra en window.jQuery (siempre que sea necesario o importado en su aplicación), debe especificarlo en la configuración del paquete web externals:

externals: {
  jquery: 'window.jQuery'
}

Con esto, en cualquier lugar de su aplicación donde use import * as $ from 'jquery', en realidad usará lo que sea window.jQuery en el momento en que se realice la solicitud / importación.


En lo que respecta a las fuentes acreditadas para responder la pregunta "¿Cuáles son las dependencias de Bootstrap?" , la única fuente es Primeros pasos.

Y aquí es donde especifican en claro jQuery no está incluido: # js- archivos

1
tao 22 may. 2020 a las 02:39

Bootstrap 4 no es compatible con Popper 2 (npm@popperjs/core), debes usar Popper 1 (npm@popper.js)

1
Fez Vrasta 19 may. 2020 a las 12:55