javascript - ¿Cómo importar popper.js?

bootstrap-4

Question

Parece ser una pregunta aburrida, pero no puedo resolverlo. ¿Cómo importar popper.js que viene junto con Bootstrap 4 beta?

Yo uso Bower y he instalado Bootstrap 4 beta. Ahora en la carpeta bower_components hay popper.js directorio popper.js , que contiene algunas subcarpetas. El problema es que no hay una carpeta dist y popper.min.js archivo popper.min.js .

Bootstrap 4 guía de enlaces a CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

¿Pero cómo importar popper.js sin CDN? ¿Dónde encontrar el archivo popper.min.js ?

EDITAR: Incluso si descargo zip desde el sitio web popper.js, contiene exactamente los mismos archivos que desde bower .

Answer 1

Formas de obtener popper.js: paquete, CDN y archivo local

La mejor manera depende de si tiene un proyecto con un administrador de paquetes como npm.

Gerente de empaquetación
Si está utilizando un administrador de paquetes, utilícelo para obtener popper.js como este:

npm install popper.js --save

CDN
Para un prototipo o un entorno de juegos (como http://codepen.io ) o simplemente puede querer una url para un archivo CDN:

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

nota: Bootstrap 4 requiere las versiones en la ruta umd (más información sobre popper / bs4) .

Archivo local

Solo guarda uno de los archivos CDN para usar localmente. Por ejemplo, pegue una de estas URL en un navegador, luego Guardar como ... para obtener una copia local.

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

Answer 2

La forma oficial de instalar Popper.js es a través de npm, Yarn o NuGet.

Utilice uno de los siguientes comandos:

npm i popper.js
yarn add popper.js
PM> Install-Package popper.js

Todo se describe en la biblioteca readme.

Con respecto a la "descarga del archivo zip", el código postal indica claramente que contiene el código fuente de la biblioteca.

Editar :

A partir de la versión 1.12.0 , Popper.js está disponible como dependencia de Bower.

Este método de instalación solo será compatible con la versión 1.x de Popper.js y se eliminará en 2.x

Debe migrar la administración de sus dependencias a un sistema moderno como npm o Yarn, como también sugiere Bower.

Answer 3

Puede descargar e importar todo Bootstrap y Popper, con un solo comando usando Fetch Injection :

fetchInject([
''https://npmcdn.com/[email protected]/dist/js/bootstrap.min.js'',
''https://cdn.jsdelivr.net/popper.js/1.0.0-beta.3/popper.min.js''
], fetchInject([
''https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js'',
''https://npmcdn.com/[email protected]/dist/js/tether.min.js''
]));

Agrega archivos CSS si los necesitas también. Ajuste las versiones y las fuentes externas para satisfacer sus necesidades y considere usar la verificación de la integridad de los sub-recursos si no está hospedando los archivos en su propio dominio o si no confía en la fuente.

Answer 4

Realmente no entiendo por qué Javascript mundo intenta hacer las cosas más complicadas. ¿Por qué no solo descargar e incluir en html? ¿Tratando de tener algo como Maven en Java? ¿Pero tenemos que incluirlo manualmente en html de todos modos? ¿Entonces, cuál es el punto? Tal vez algún día lo entienda pero no ahora.

Así es como puedo conseguirlo.

• descargar e instalar NodeJs
• ejecute "npm install popper.js --save"

• entonces recibo este mensaje

  [email protected] agregado 1 paquete en 1.215s

• Entonces, ¿dónde está "agregar paquete"? muy informativo, verdad? Lo encontré en mi C: / Users / surasin / node_modules / popper.js / dist

Espero que esto ayude

Answer 5

Resulta que Popper.js no proporciona archivos compilados en su repositorio GitHub. Por lo tanto, uno tiene que compilar el proyecto por su cuenta o descargar archivos compilados desde CDNs. No se puede importar automáticamente.

Answer 6

Tuve el mismo problema.

Descargué el archivo ''popper.min.js'' desde el CDN en el sitio web bootstrap.

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

Más fácil que compilar el proyecto.

Answer 7

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

Copie las rutas CDN de Javascripts (Popper, jQuery y Bootstrap) de la misma manera (es importante) como se indica.

<head>
//Path to jQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
////Path to Popper - it is for dropsdowns etc in bootstrap
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
//Path to bootsrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>

Answer 8

agregue popper **. js ** como dependencia en lugar de popper (solo): vea la diferencia en negrita.

hilo agregar popper.js, en lugar de hilo agregar popper

hace la diferencia

e incluir el script de acuerdo a sus necesidades:

como html o el acceso a la biblioteca como una dependencia en aplicaciones SPA como reaccionar o angular