Estoy creando una aplicación de blogs con Laravel 8 y Bootstrap 5. Utilizo un formulario colocado dentro de un modal Bootstrap para agregar una publicación. Además, incluyo un único archivo JavaScript en el proyecto.
<script src="{{ asset('js/app.js') }}"></script> En resources/js , tengo un archivo app.js y bootstrap.js. En app.js, necesito bootstrap.js con
require('./bootstrap') Desde webpack.mix.js compilo todo eso en el único archivo de JavaScript public\js\app.js :
mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps();Quiero agregar popper.js al proyecto, así:
require('./popper'); require('./bootstrap'); Pero, para este propósito, necesito popper.js en resources/js junto con los otros dos archivos. Entonces, hice npm i @popperjs/core y npm run dev . Pero no compila, y no obtengo popper.js en el directorio js mencionado anteriormente. Entonces, ¿cómo puedo solucionar este problema?
En su archivo resources/js/bootstrap.js, puede usar Popper.js y Bootstrap con jQuery como se muestra a continuación.
window._ = require('lodash'); try { window.$ = window.jQuery = require('jquery'); window.Popper = require('@popperjs/core'); window.bootstrap = require('bootstrap'); } catch (exception) { console.error(exception); }1 - Instale @popperjs/core usando este comando: npm i @popperjs/core
2 - Agregue esta línea a su archivo bootstrap.js :
window.Popper = require('@popperjs/core');
3 - Ejecute este comando: npm run dev
4 - Ahora tiene acceso a window.Popper en sus archivos blade.