for - Cómo usar Popper.js con Bootstrap 4 beta

popper.js ejemplos (8)

Soy de la vieja escuela, así que descargué el código fuente a 1.12.0 y luego hice lo siguiente:

<script src="/popper.js-1.12.0/dist/popper.js"></script> <script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

Pero me estoy poniendo:

Uncaught SyntaxError: Unexpected token export

en la línea 2294 donde dice:

export default Popper;

Popper requiere que uses el archivo bajo la ruta umd con Bootstrap 4.

Cualquiera de estas versiones de CDN funcionará:

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js

Otras respuestas / comentarios mencionan la versión, sin embargo , el problema no está relacionado con el control de versiones .

Nunca es una mala práctica usar el ejemplo de Bootstrap de incluir popper porque siempre debería funcionar. Bootstrap 4 a partir de ahora recomienda popper 1.11, que es una opción segura, sin embargo, la versión 1.12.5 también debería funcionar bien.

Nota al margen: ¿Por qué la confusión con umd, esm y simples archivos popper? La intención es un paquete de módulos flexible, pero en realidad podría simplificarse. Esta publicación explica algunos de los problemas con los nuevos tipos de módulos.

¡Solo usa la versión de paquete de bootstrap y estás bien!

<script src="./node_modules/jquery/dist/jquery.min.js"></script>   <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Asegúrese de utilizar la versión Popper.js a la que se hace referencia en los documentos de Bootstrap.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Contenedores separados:

Si siguió la respuesta aceptada y sus consejos sobre herramientas todavía están en el lugar incorrecto, puede ser porque tiene un contenedor diferente para cada consejo sobre herramientas.

Intentaría esto para permitir que la información sobre herramientas se coloque cerca del elemento primario del elemento :

const initializeTooltips = function () { $(''[data-toggle="tooltip"]'').each(function() { $(this).tooltip({container: $(this).parent()}); }); }; $(document).ready(function () { initializeTooltips(); });

Pruébelo usted mismo en jsfiddle .

Desea utilizar el destino dist especificado en el archivo package.json como entrada main .

En este caso, está buscando la compilación umd ( dist/umd/popper.js )

¿Qué es UMD?

El patrón UMD generalmente intenta ofrecer compatibilidad con los cargadores de scripts más populares del día (por ejemplo, RequireJS entre otros). En muchos casos, usa AMD como base, con una carcasa especial agregada para manejar la compatibilidad de CommonJS.

Esto significa que un paquete UMD se puede cargar a través de la etiqueta <script> e inyectarse dentro del alcance global ( window ), pero también funciona si es necesario con un cargador CommonJS como RequireJS.

Según Fez Vrasta.

Si recupera popper a través de NuGet Package Manager en Visual Studio, asegúrese de que su ruta de referencia de script popper.js esté utilizando la carpeta umd :

Ejemplo de MVC ASP.Net BundleConfig:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/umd/popper.js", //path with umd "~/Scripts/bootstrap.js", "~/Scripts/respond.js"));

Ejemplo de referencia de script directo:

<script src="~/Scripts/umd/popper.js" type="text/javascript"></script>

Según los documentos de popper :

Popper.js se envía actualmente con 3 objetivos en mente: UMD, ESM y ESNext.

UMD - Definición del módulo universal: AMD, RequireJS y globales;

ESM - Módulos ES: para webpack / Rollup o navegador que admite la especificación;

ESNext: Disponible en dist /, se puede usar con webpack y babel-preset-env; Asegúrese de usar el adecuado para sus necesidades. Si desea importarlo con una etiqueta, use UMD.

Yo tuve el mismo problema. Intenté diferentes enfoques, pero este funcionó para mí. Lea las instrucciones de http://getbootstrap.com/ .

Copie los enlaces de CDN (jQuery, Popper y Bootstrap) en el mismo orden (es importante) como se indica.